等到某事== javascript中的某事

Question

我正在编写一个脚本，该脚本按下添加到购物车按钮，然后等待购物车项目数 = 当前项目数

现在，即使在 if 语句变为 false 之后，我似乎也无法摆脱我添加的 if 语句。

这是我尝试过的：

  $("#add-remove-buttons :input")[0].click();
  let cart_count = $("#items-count").text();
  if (cart_count !== `${request} items`){
    setInterval(function() {
      let cart_count = $("#items-count").text();
      console.log(cart_count, `${request} items`);
    }, 50);
  }
  if (cart_count == `${request} items`) {
    chrome.runtime.sendMessage({finished:"done_after1"});
  }

这是控制台中的结果：

正如您可以告诉它的那样，控制台记录了 1 项 2 项，然后它转到 2 项 2 项，这就是它应该停止并发送消息的时间。但由于某种原因，它一直在控制台记录

我也试过这段代码：

$("#add-remove-buttons :input")[0].click();
let cart_count = $("#items-count").text();
while (cart_count !== `${request} items`){
  let cart_count = $("#items-count").text();
  console.log(cart_count, `${request} items`);
}
chrome.runtime.sendMessage({finished:"done_after1"});

所以它应该在while循环不再为真之后退出while循环。但是由于某种原因，当我测试这个页面时，页面只是冻结了，我什至无法右键单击来检查控制台。由于某种原因，当我尝试这个 while 循环时，页面总是冻结。

如果有人知道这里出了什么问题，如果您能通过告诉我问题来帮助我，我将不胜感激。谢谢你！

Answer 1

只需将if 移动到setInterval - 您基本上必须在更改发生之后执行脚本：

$("#add-remove-buttons :input")[0].click();
let cart_count = $("#items-count").text();
if (cart_count !== `${request} items`){
  setInterval(function() {
    let cart_count = $("#items-count").text();
    console.log(cart_count, `${request} items`);
  }, 50);
  if (cart_count == `${request} items`) {
    chrome.runtime.sendMessage({finished:"done_after1"});
  }
}

但是不要忘记也使用stopInterval。

同时使用计时器来等待某些事情并不理想。最好使用在发生更改时触发的事件。

Answer 2

由于 #items-count 似乎不是 INPUT/TEXTAREA 等（即您可以使用 change 事件的东西，那么您可以使用 MutationObserver 如下

注意：我假设

$("#add-remove-buttons :input")[0].click();

需要单击直到值匹配 - 您的原始代码似乎只单击一次

我还使用非 jquery 来处理 #items-count 元素 - 因为在我看来它更简单

function handler(node) {
    let check = first => { // when triggered by mutation event, the argument "first" will be undefined
        let cart_count = node.textContent;
        if (cart_count === `${request} items`) {
            chrome.runtime.sendMessage({finished:"done_after1"});
            return true; // stop observing
        } else { // didn't match
            if (first) { // this is the first call - add a MutationObserver
                new MutationObserver((mutationList, observer) => {
                    if(check()) { // call with no argument, because MutationObserver is already set up
                        observer.disconnect(); // condition is met, so stop observing
                    }
                }).observe(node, {
                    childList:true
                });
            }
            // condition is not met, so click the add button
            $("#add-remove-buttons :input")[0].click();
        }
        return false; // keep observing
    };
    check(true);
}
handler(document.querySelector('#items-count'));

但是，如果 #items-count 是一个发出 change 事件的元素，那就更简单了

function handler(arg) { // when triggered by change event, arg will be defined
    let cart_count = $("#items-count").text();
    if (cart_count === `${request} items`) {
        if (arg) { // trigger by change event
            $("#items-count").off('change', handler);
        }
        chrome.runtime.sendMessage({finished:"done_after1"});
    } else {
        if (!arg) { // first call
            $("#items-count").change(handler);
        }
        $("#add-remove-buttons :input")[0].click();
    }
}
handler();

Answer 3

您没有在间隔内重新检查值，因此消息只有一次发送的机会，这将发生在间隔执行之前的某个时间。

也许可以尝试更多类似的东西......

$("#add-remove-buttons :input")[0].click ();
let cart_count = $("#items-count").text ();

if (cart_count === `${request} items`) {
    chrome.runtime.sendMessage ({ finished: "done_after1" });
} else {
    let interval = setInterval (function () {
        let cart_count = $("#items-count").text ();

        if (cart_count == `${request} items`) {
            chrome.runtime.sendMessage ({ finished: "done_after1" });
            clearInterval (interval);
        }

        console.log (cart_count, `${request} items`);
    }, 50);
}