synchronous method in javascript and $.get method in jQuery

Question

I have a strange issue with my method :

$('#search').on('keyup', function () {
    var valNow = $('#search').val();
    if (last !== valNow && valNow !== '') {
        console.log(valNow + ' / ' + i);
        //interrogate a server from a cities
        $.get(path + '/' + strategy() + '/' + valNow,
            function (data, status) {
                //here
                console.log(status);
                if (status === 'success') {
                    cities = [];
                    cities = data;
                }
            },
            'json');
        // make new last
        last = valNow;
        //list result
        var items = [];
        console.log(cities[0]);
        console.log(' / ' + i);
        $(cities).each(function (index, value) {
            console.log(value);
            var notStrong = valNow.length;
            var strong = value.length;
            items.push('<li><strong>'+ valNow +'</strong>'+value.substr(notStrong)+'</li>');
        });
        $('.result').append(items).show();
        i++;
        console.log('finished');
                  }
             }
        );

the problem is simply when I use (/bind) this function I get finish message before console.log(status) (commented://here), the $.get function takes a lot of times to interrogate the web service , I don't know why I have this issue with $.get function, is it a thread or something like this ??? what I want is to get in order all statements (console.log(status) then console.log('finish')).

It looks like the `$.get` is running asynchronously, which is default. You can use an object as your options parameter instead of using three separate parameters for `$.get`, then you can specify `async: false` to get it to run asynchronously (i.e. the rest of the function will wait until the GET request finishes). If it takes a while to return from the server, I'd suggest adding a progress bar or loading indicator of some kind so the user doesn't think the page just froze. Edit: https://stackoverflow.com/questions/44172493/how-to-make-get-function-synchronous-in-jquery — , Mar 28 '18 at 23:24

score 0 · Answer 1 · answered Mar 28 '18 at 23:37

Using AJAX to get data from a remote location always runs asynchronous, meaning that, when calling $.get, the call to the server will be made and the js code returns immediately. Then, after the code in between, console.log('finish') will be called, and some time later, when the $.get call receives the response from the server, the code inside the $.get anonymous function will be called, which then runs console.log(status).

That is the intended design for grabbing data from remote locations. If you want to run the other code strictly after that, you have to run it inside the callback function of $.get, like that:

$('#search').on('keyup', function() {
    var valNow = $('#search').val();
    if (last !== valNow && valNow !== '') {
        console.log(valNow + ' / ' + i);
        //interrogate a server from a cities
        $.get(path + '/' + strategy() + '/' + valNow,
            function(data, status) {
                //here
                console.log(status);
                if (status === 'success') {
                    cities = [];
                    cities = data;
                }
                // make new last
                last = valNow;
                //list result
                var items = [];
                console.log(cities[0]);
                console.log(' / ' + i);
                $(cities).each(function(index, value) {
                    console.log(value);
                    var notStrong = valNow.length;
                    var strong = value.length;
                    items.push('<li><strong>' + valNow + '</strong>' + value.substr(notStrong) + '</li>');
                });
                $('.result').append(items).show();
                i++;
                console.log('finished');
            },
            'json');
    }
});

There are other ways to make the code more pretty, for example using Promises.

i have another question, how can I simulate when the user finishes typing on the input, and not when the key up or down — ekka, Mar 30 '18 at 16:57

score 0 · Accepted Answer · answered Mar 28 '18 at 23:39

Try appending your options inside the function block which gives you the data

$('#search').on('keyup', function () {
var valNow = $('#search').val();
if (last !== valNow && valNow !== '') {
    console.log(valNow + ' / ' + i);
    //interrogate a server from a cities
    $.get(path + '/' + strategy() + '/' + valNow,
        function (data, status) {
            if (status === 'success') {
                cities = data;
                // append all the options here
             }
        },'json');
     }
   }
);

synchronous method in javascript and $.get method in jQuery

2 Answers2