loop – Blackbams Blog https://blog.blackbam.at development - digital arts - internet Tue, 08 Dec 2015 17:30:15 +0000 en-US hourly 1 https://wordpress.org/?v=6.8 Ajax (jQuery) and loops: Local variable scoping and callback functions https://blog.blackbam.at/2015/12/08/ajax-jquery-and-loops-local-variable-scoping-and-callback-functions/ https://blog.blackbam.at/2015/12/08/ajax-jquery-and-loops-local-variable-scoping-and-callback-functions/#respond Tue, 08 Dec 2015 17:30:15 +0000 https://blog.blackbam.at/?p=2273 Thats a very annoying common problem I discovered – if calling Ajax within a Javascript loop the callback function will be called asynchronously. That means: All local variables in the callback function will have their future value instead the value they had when the loop was running.

 

Example 1 (probably unwanted results):

var types = ["boring","stupid","funny"];

for(key in types) {
    var type=types[key];

    $.ajax({url: "/?connection=get&type="+type, success: function(result){
        $('#'+type).html(result);
    }
    });
}

Result: Only #funny is populated (with the results of the last callback, no matter which ends last).

 

Example 2 (solution):

var types = ["boring","stupid","funny"];

for(key in types) {
    var type=types[key];

    (function(type) {
        $.ajax({url: "/?connection=get&type="+type, success: function(result){
            $('#'+type).html(result);
        }
        });
    })(type);
}

Result: The elements with ids #boring, #stupid and #funny are populated with the result of the corresponding callback.

 

Explanation: You have created a closure which is preserving the value of type according to the current iteration.

Share

]]> https://blog.blackbam.at/2015/12/08/ajax-jquery-and-loops-local-variable-scoping-and-callback-functions/feed/ 0