ждать, пока что-то == что-то в JavaScript

Question

Я пишу сценарий, который нажимает кнопку добавления в корзину, а затем ждет, пока количество элементов в корзине = текущее количество элементов

В данный момент я не могу выйти из оператора 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 </p>

Answer 1

Поскольку #items-count не является INPUT / TEXTAREA и т. Д. (Т. Е. Что-то, с чем вы можете использовать событие change, то вы можете использовать MutationObserver следующим образом

Примечание: I 'м, при условии, что

$("#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 2

Вы не перепроверяете значение в пределах интервала, поэтому у сообщения есть только один шанс на отправку, что произойдет когда-то за до интервала выполнения.

Возможно, попробуйте что-нибудьбольше как это ...

$("#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);
}

Answer 3

Просто переместите 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.

Также использование таймера для ожидания для чего-то не является идеальным.Было бы лучше использовать событие, которое срабатывает, когда что-то меняется.