遇到种族问题。没有jQuery答案

Question

没有jQuery答案

我有这个漂亮的小脚本：

  var addToCartButton = document.querySelector("[data-ab-testing]");
  addToCartButton.addEventListener("click", function() {
    if (addToCartButton.dataset.abTesting === "true") {
      var ch = "?";
      if (String(document.URL).includes("?")) {
        ch = "&";
      }
      window.top.location.href = `${document.URL}${ch}preview_theme_id=`;
    }
    document.querySelector(".Drawer__Content").submit();
  });

这里是背景故事：

我们有一个shopify网站，我们正在尝试进行一些A / B测试，因此我们设置了一个cookie，以使人们保持主题A或主题B。足够简单吗？问题是，当您转到除主题A以外的任何主题的结帐页面时，屏幕底部都会出现一个小栏，让您知道您正在测试主题中。因此，为了摆脱这一点，我们添加了此脚本，无论您使用哪种主题，都可以将您带回正确的主题。

以下是脚本的作用：

脚本抓住购物车按钮，检查AB测试是否设置为true（我们使用动态液体代码将其设置为true或false），然后（如果为true）将“ preview_theme_id =”附加到所有内容。

这里是问题：

我们在重置window.top.location.href和.submit（）的URL之间获得了竞争条件。我不知道我是否可以做某种异步等待/承诺架构，说实话，我不熟悉页面生命周期，只知道在shopify api中查找内容并将逻辑从头重写到此，就知道该如何使用它。提取表单数据并以某种方式伪造该URL。我不应该遇到任何跨站点问题，但是我想知道在尝试完全重做此工作之前，是否有人可以使用任何想法或文章可能会有所帮助。

Answer 1

谢谢Dave B，这是最终起作用的修改后的代码：

  var addToCartButton = document.querySelector("[data-ab-testing]");
  var cartForm = document.querySelector(".Drawer__Content")
  addToCartButton.addEventListener("click", function() {
    if (addToCartButton.dataset.abTesting === "true") {
      var ch = "?";
      if (String(document.URL).includes("?")) {
        ch = "&";
      }
      cartform.action = `${document.URL}${ch}preview_theme_id=`;
    }
    cartForm.submit();
  });