How to prevent a ajax function in javascript to be executed several times at once

Question

I am building search engine with PLAY Framework 2.2.1 and have problems with listing the results. The search results are stored in the cache provided by the framework and can be accessed with the uniqe id. I don't want the results to get displayed all at once, so the result list is fetched in chunks via ajax. The first part after the result site has loaded and the rest every time when a certain scroll event occurs.

Now the problem is that some of the results are listed several times and the alert messages tell me that the function next_results sometimes gets executed with the same value for variable pos twice or more times. To prevent this issue I use the processing variable but this doesn't seem to work properly.

var processing = false;
var not_finished = true;
var pos = 0;
function next_results(uuid, result_size){
    alert("input\n" + result_size + " result_size\ncurrent_position" +  pos);

    jsRoutes.controllers.Application.getResults(uuid, pos, result_size).ajax({
        success : function(data) {
                var len = data.length;
//              alert("input\n" + result_size + " result_size\ncurrent_position" +  pos + "\n result_length" + len);
                pos = pos + len;
                if (len == 0){
                    not_finished = false;
                } else {
                    for (var i = 0; i < len; i++) {
                        var result= data[i];
                        $('#results').append(result.string);
                    };
                }
            }
    });
}

var uuid;
function set_uuid (x){
    uuid = x;
}


$(document).ready(function(){
    //initial
    if (!processing){
        processing = true;
        next_results(uuid, 10);
        processing = false;
    }

    $(document).scroll(function(e){

        if (processing)
            return false;

        if (not_finished && $(window).scrollTop() >= $(document).height() - $(window).height() - 300){
            processing = true;
            next_results(uuid, 2);
            processing = false;
        }
    });
});

The unique id is set in the html code (via Scala):

<script>set_uuid('@uuid');</script>

thanks for your advice, biesior, i am pretty new in web development. can you answer my questions below? — Matthias Munz, Dec 11 '13 at 18:36

score 2 · Accepted Answer · answered Dec 11 '13 at 18:21

2

        next_results(uuid, 2);
        processing = false;  <-- WRONG

You need to do it in the success function

success : function(data) {
    ...
    ...           
    processing = false; 
}

answered Dec 11 '13 at 18:21

epascarello

204,599
20
195
236

i am pretty new to web development. can you give me a explanation? – Matthias Munz Dec 11 '13 at 18:23
how can i initially execute next_results 3 or 4 times? when write if (!processing){ processing = true; next_results(uuid, 2); processing = true; next_results(uuid, 2); processing = true; next_results(uuid, 2); } it returns 3 times the same two results – Matthias Munz Dec 11 '13 at 18:30
@MatthiasMunz create new question instead of putting additional queries in comments – biesior Dec 11 '13 at 18:39
Why des it work? Because `getResults` is an asynchronous call and you treat it as a synchronous one. The line after next_results is called right away and does not wait. http://stackoverflow.com/a/4560233/14104 – epascarello Dec 11 '13 at 20:23

How to prevent a ajax function in javascript to be executed several times at once

1 Answers1