Javascript - 他のスクリプトを実行させてから、スクリプトを続行させてください。

Question

私はいくつかのドロップダウンリストを持つウェブサイトを持っています。 1つのドロップダウンリストで値を選択すると、他のドロップダウンリストのオプションを変更するjavascriptコードが実行されます。

（例：最初のリストで国を選択し、その下のドロップダウンにはその国の都市のリストが入力されます）。

これは私のウェブサイトではありません。これらのドロップダウンに値を入力するGreasemonkeyスクリプトを作成しようとしています。私はこのjQueryコマンドを使ってオプションの選択をシミュレートすることができます。

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

これは問題なく動作します。一番上のドロップダウンで値を選択します。しかし、他の人たちには、私がそこに送る価値がまだ含まれていないからです。

私の選択に従って他のドロップダウンリストを作成したいが、それはスクリプトが終了するまで起こらない。つまり、Webサイトで実行され、ドロップダウンリストを入力するスクリプトは、スクリプトの終了を待ちます。

私が達成したいのは、スクリプトを一時停止し、ウェブサイトスクリプトを実行してからスクリプトを続行することです。言い換えれば、ウェブサイトのスクリプトに実行優先度を与えます。

setTimeoutを使ってみましたが、うまくいかなかった。トップドロップダウンリストの値を変更することも停止します。

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

私のスクリプトを一時停止する方法、他の人に実行させてからスクリプトを実行し続ける方法はありますか？

Answer 1

これはsetTimeoutで動作しますが、コールバックに「GBR」の選択を入れてはいけません。すぐにその部分を実行したいと思っています。代わりに、2番目のリストが入力されているかどうかを確認する他のコードを入力します。そうであれば、それを行うためのアクションを実行します。

// 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>

：ここ

は、「既存のページは、」応答として、いくつかのラテン語の単語を提供し、2番目のリストボックスを移入するために使用されているいくつかのダミーのAjaxサーバーでシミュレートされたいくつかのいくつかのコードであり、

ページロード時にGBR値が選択され、コンソールから2番目のボックスの変更が検出されたことが出力されることに注意してください。その2番目のビットはsetTimeoutコールバックで発生します。