等到== 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"});
  }

這是控制台中的結果：

正如您可以告訴它console.logged 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循環時，頁面總是凍結。

如果有人知道這里出了什么問題，如果您能通過告訴我問題來幫助我，我將不勝感激。 謝謝！ <3

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);
}