Javascript - Let other scripts execute, then continue script

Question

I have a website with couple of dropdown lists. When a value is selected in one dropdown list, the site runs a javascript code that changes the options in other dropdown lists.

(Example: I select a country in the first list and the dropdown below it is populated with a list of cities from that country).

This isn't my website. I am trying to create a Greasemonkey script that will fill values to these dropdowns. I am able to simulate selection of an option using this jQuery command.

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

This works fine. It selects the value in the top dropdown. Not in the others however, because they don't yet contain the values I am sending there.

I want the other dropdown lists to be populated according to my selection, but that doesn't happen until my script ends. In other words, the script that runs on the website and populates the dropdown lists waits for my script to end.

What I would like to achieve is to pause my script, allow website scripts to run and then continue my script. In other words, give website scripts priority to execute.

I tried using setTimeout but that didn't work. It even stop changing the top dropdown list value.

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

Any idea how to pause my script, let others to execute and then continue running my script?

Answer 1

It can work with setTimeout, but you should not put your "GBR" selection in its callback -- you want to execute that part still immediately. Instead put other code there, which will check if the second list has been populated, and if so, to perform whatever action with it that you intended to do.

Here is some some code, where the "existing page" is simulated with some dummy Ajax server which provides some Latin words as response and which are used to populate the second list box:

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

Note how the GBR value is selected upon page load, and that the console outputs that the change in the second box has been detected. That second bit happens in the setTimeout callback.