ajax调用中的getJSON导致无限循环

Question

I am currently calling external php files and displaying them within specific div. This is all done using the standard jQuery $.ajax call.

However an issue arises when one of the pages being pulled in attempts the following getJSON call, resulting in an infinite loop:

function getContacts() {
  if ($('body.all-contacts').length){
    $.getJSON('assets/data/contacts.json', function(data) {
      var template = $('#contacts-template').html();
      var info = Mustache.to_html(template, data);
      $('.contact-list').html(info);
    });
  }
};

The above function is called as follows:

$(document).ajaxComplete(function(){
....
getContacts();
....
})

I've also tried using ajaxStop() instead of ajaxComplete() but the issue persists.

Answer 1

The infinite loop seems normal to me. Since you call the function getContacts when the getJSON is completed, getContacts contains the getJSON call so the call will fire again, which will result in another ajaxcomplete callback, which will fire the getContacts function again. etc etc.

To this from happening you can remove the getContacts() in the ajaxcomplete function.

If you wish to keep the infinite loop but with between every ajax call you can use the javascript function setTimeout. format of function:
setTimeout("javascript function",milliseconds);

Answer 2

getContacts() should not be called, when a getContacts() call completes.

If you need to call that function, when another one completes, make sure (using if ... ) that it is not getContacts() that completed.