Javascript Function Inside Jquery Foreach Loop Doesn't Wait For Response

My foreach loop: jQuery('.custom-checkbox').each(function() { if (jQuery(this).attr('data-action') == 'true') { if(deleteQuoteItemFromListing(jQuery(this).attr('data-i

Solution 1:

My guess is that the code you've omitted is doing an asynchronous ajax call. Since ajax is asynchronous by default, the code you write there ($.ajax or whatever) starts the process, but then the process continues in the background while your code continues to run.

There's no reasonable way to make the deleteQuoteItemFromListing function wait for the response. (While it's possible to do synchronous ajax, A) it makes for a poor user experience by locking up the browser UI, and B) jQuery will be removing that option at some stage, forcing you to go direct to XHR if you want to keep doing it.)

Instead, restructure your code to embrace the asynchronous nature of web programming by having your function either return a promise or accept a callback, and then resolve the promise or call the callback when done.

Here's a rough idea of what the promise version would look like:

jQuery(".custom-checkbox").each(function() {
    if (jQuery(this).attr('data-action') == 'true') {
        deleteQuoteItemFromListing(jQuery(this).attr('data-id'))
            .done(function(id) {
                console.log(id + ' passed');
            })
            .fail(function(id) {
                console.log(id + ' failed');
            });
    }    
});

functiondeleteQuoteItemFromListing(id){
    var d = jQuery.Deferred();
    jQuery.ajax(/*...*/)
        .done(function() {      // This bit assumes the deletion worked if
            d.resolveWith(id);  // the ajax call worked, and failed if the
        })                      // ajax call failed; if instead the ajax
        .fail(function() {      // call always works and returns a flag,
            d.rejectWith(id);   // adjust accordingly
        });
    return d.promise();
}

Solution 2:

Using callback ensures that the function is executed.

jQuery(".custom-checkbox").each(function () {
    if (jQuery(this).attr('data-action') == 'true') {
        deleteQuoteItemFromListing(jQuery(this).attr('data-id'), handleData);

    }
});

    functionhandleData(data) {
    if (data) {
        console.log('passed');
    } else {
        console.log('failed');
    }
}


functiondeleteQuoteItemFromListing(id, callback) {
    //does someoperations and on success
    delurl = getDelUrl() + id; //baseurl/module/action/delete/idnewAjax.Request(delurl, {
        method: 'get',
        onSuccess: function (transport) {
            callback(true);
        }
    })
}

I hope this will work for you. you need to define handleData function outside of the other function.

Solution 3:

Use jquery When.

You need to queue those Deferred in an array of Deferred and then apply all of the functions at once.

If one fails all will fail and if all succeeds all will pass.

check this out jQuery When

var queue = [];
      var items = 0;
      returnnew $.Deferred(function (deferred) {
      $(".custom-checkbox").each(function () {
       if ($(this).attr('data-action') == 'true') {
        items++;
        queue.push(function () {
            newAjax.Request(delurl, {
                method: 'get',
                onSuccess: function (transport) {
                    items--;
                    if(items === 0)
                        deferred.resolve();
                },
                onError:function(e){
                  deferred.reject(e);   
                }
            });
        });
    }
});

//now resolve all of the deferred fns

  $.when(queue).done(function(){
      console.log('All went well');
  })
 .fail(function(e){
      console.log('Error ' + e);
  });
});      

Solution 4:

(Part of) Your problem is in this simple statement:

return TRUE;

In JavaScript, the "true" boolean is written in lowercase:

returntrue;

The interpreter thinks TRUE is a variable, and will throw a ReferenceError, since it's not set / defined anywhere, meaning the function will never return true.