如何在 JavaScript 中一個接一個地運行一個函數？

Question

我正在自動執行 Paypal 上的一項任務，該任務涉及連續單擊頁面上的幾個按鈕。

基本上，我需要單擊一個單選按鈕，然后單擊“下一步”按鈕以前進到下一頁。 但是除非先單擊單選按鈕，否則我無法前進到下一頁。

我目前在計時器上有第二個功能，但是有沒有辦法在第一個功能完成並按下第一個單選按鈕后啟動第二個功能？

這是我的代碼：

// ==UserScript==
// @name     PayPal Transfer Radio
// @include  https://www.paypal.com/myaccount/money/balances/withdraw/balance/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==
    
$(function(){
  $('[id="BA-SMSNY4E48EHGC__ACH__STANDARD_FUNDSRadioBtn"]').click()
});

setTimeout(function(){
    $('[name="selectFiNext|standard"]').click();
}, 2000);

setTimeout 方法按原樣工作，但它不是最佳的。

Answer 1

setTimeout是最簡單、最可靠的方法。 修補您不擁有的頁面時，這是一個很好的方法。

如果您想在下一個按鈕出現時立即單擊它，請減少超時時間，如果該按鈕尚不存在，請設置一個新的超時時間。 這里也不需要依賴像 jQuery 這樣的大依賴：

document.querySelector('[id="BA-SMSNY4E48EHGC__ACH__STANDARD_FUNDSRadioBtn"]').click();
const clickNext = () => {
  const btn = document.querySelector('[name="selectFiNext|standard"]');
  if (btn) btn.click();
  else setTimeout(clickNext, 50);
};
setTimeout(clickNext, 50);

如果你真的想避免輪詢，你也可以在按鈕的父級上使用 MutationObserver，但這會變得更加復雜。

如果按鈕網絡請求后出現，另一種選擇，可以工作是看當網絡請求完整，與ajaxComplete如果網站使用jQuery，或通過的Monkeypatching window.XMLHttpRequest 。

Answer 2

您需要將事件處理程序綁定到“click”JavaScript 事件，或在元素上觸發該事件。 如下：

$(function(){
  $('[id="BA-SMSNY4E48EHGC__ACH__STANDARD_FUNDSRadioBtn"]').click(function(){
    $('[name="selectFiNext|standard"]').click();
  });

  $('[id="BA-SMSNY4E48EHGC__ACH__STANDARD_FUNDSRadioBtn"]').click();
});

以下代碼片段將事件處理程序click附加到 ID 為BA-SMSNY4E48EHGC__ACH__STANDARD_FUNDSRadioBtn的元素，這將觸發具有屬性name="selectFiNext|standard"的元素的事件句柄單擊。

Answer 3

只是想分享一種更現代的方法，它與公認的答案相同，但在我看來更容易閱讀：

// Converts set timeout from callback approach to promise approach
function AsyncTimeout(delay = 0) {
    return new Promise(function (resolve, reject) {
        setTimeout(resolve, delay);
    });
}

(async () => {
    // possibly, you might or might not want to awit a bit before you start
    // await AsyncTimeout(100);

    document.querySelector('[id="BA-SMSNY4E48EHGC__ACH__STANDARD_FUNDSRadioBtn"]').click();
    let btn = null;
    // safeguard to prevent endless loop if something goes wrong
    let iterations = 0;
    while (btn == null) {
        await AsyncTimeout(50);
        // try to assign the btn
        btn = document.querySelector('[name="selectFiNext|standard"]');
        // remember the iteration count
        ++iterations;
        // if we tried too many times, just give up
        if (iterations > 100) {
            throw new Error("Couldn't find the button to click");
        }
    }
    btn.click();
})();