Javascript - 讓其他腳本執行，然後繼續腳本

Question

我有一個帶有幾個下拉列表的網站。當在一個下拉列表中選擇一個值時，該網站將運行一個JavaScript代碼，用於更改其他下拉列表中的選項。

（例如：我在第一個列表中選擇一個國家，並在其下方的下拉列表中填入該國家的城市列表）。

這不是我的網站。我正在嘗試創建一個Greasemonkey腳本來填充這些下拉列表的值。我能夠使用此jQuery命令模擬選項的選擇。

$('select[id="dropdown1"]').val("GBR").trigger('change'); 

這工作正常。它選擇頂部下拉菜單中的值。但是，其他人不會，因爲他們還沒有包含我在那裏發送的價值觀。

我希望其他下拉列表根據我的選擇填充，但直到我的腳本結束纔會發生。換句話說，在網站上運行並填充下拉列表的腳本將等待我的腳本結束。

我想實現的是暫停我的腳本，允許網站腳本運行，然後繼續我的腳本。換句話說，給網站腳本優先執行。

我試過使用setTimeout，但沒有奏效。它甚至會停止更改頂部下拉列表值。

setTimeout(function() { 
    $('select[id="dropdown1"]').val("GBR").trigger('change'); 
}, 3000); 

任何想法如何暫停我的腳本，讓別人執行，然後繼續運行我的腳本？

Answer 1

它可以與setTimeout一起使用，但不應該在回調中放置「GBR」選項 - 您想要立即執行該部分。而是將其他代碼放在那裏，它將檢查第二個列表是否已填充，如果是，則執行您打算執行的任何操作。

下面是一些一些代碼，其中「現有頁面」模擬一些虛擬的Ajax服務器提供了一些拉丁詞語，比如響應並用於填充第二個列表框：

// Script already on the page -- you can ignore this bit 
 
$("#dropdown1").change(function() { 
 
    $.get("https://jsonplaceholder.typicode.com/posts/" + (this.selectedIndex+1)).then(function (response) { 
 
     $("#dropdown2").empty().append(
 
      $.map(response.body.split(" "), function (txt) { 
 
       return $("<option>").text(txt) 
 
      }) 
 
     ); 
 
    }); 
 
}); 
 

 
// Your GreaseMonkey script: 
 
$("#dropdown2").empty(); // really empty this, so you can detect when it is populated 
 
$('#dropdown1').val("GBR").trigger('change'); 
 
setTimeout(function loop() { 
 
    if ($("#dropdown2>option").length) { 
 
     console.log('change detected'); 
 
     return; 
 
    } 
 
    // Keep trying 
 
    setTimeout(loop, 50); 
 
}, 50);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="dropdown1"> 
 
    <option>Norway</option> 
 
    <option>Jemen</option> 
 
    <option>Kenya</option> 
 
    <option>GBR</option> 
 
</select> 
 
<select id="dropdown2"> 
 
</select>

請注意頁面加載時如何選擇GBR值，並且控制檯輸出檢測到第二個框中的更改。第二位發生在setTimeout回調中。