Включить setTimeout В jQuery .each

Question

Следующий код запрашивает json-данные из URL-адреса. После того, как он имеет эти данные, он запускает функцию .each для каждого элемента в json-данных. Для примера я уменьшил функцию .each, просто выполнив document.write с каждым значением из json и предупредив «закончен» после его окончания.

Если я удалю setTimeout, тогда код работает так, как должен, сначала заканчивая все команды .each, а затем завершая предупреждение. Однако, с помощью setTimeout, он предупреждает о завершении до того, как он выполнит все команды .each.

У меня сама задержка работает отлично, однако код ПОСЛЕ первоначальной задержки выполняется немедленно, не дожидаясь выполнения всех команд .each. Вот код:

$.ajax({ 
      type: "GET", 
      url: 'url to json data', 
      dataType: "json", 
      success: function(data) { 
      var time = 10; 
       $.each(data, function(key, val) { 
       setTimeout(function() { 
       document.write(val.term); 
        return; 
       }, time); time += 10; 
       }); 
      alert('finished'); 
      }, 
      error: function() {} 
     }) 

Как я могу держать задержку во время прохода через команду .each и только тогда, когда она будет закончена перебор всех команд .each, бдительная 'закончила?

Answer 1

Что вы можете сделать, это использовать отложенные jQuery здесь. Используйте обещание, а затем вызовите обратный вызов, когда все будет сделано.

непроверенная, но вы можете сделать что-то вроде этого:

$.ajax({ 
    type: "GET", 
    url: 'url to json data', 
    dataType: "json", 
    success: function(data) { 
     var time = 10, 
      timeouts = []; 
     $.each(data, function(key, val) { 
      var def = new $.Deferred; 
      timeouts.push(def); 

      setTimeout(function() { 
       console.log(val.term); 
       def.resolve(); 
      }, time); 
      time += 10; 
     }); 

     $.when.apply($, timeouts).done(function(){ 
      alert('finished'); 
     }); 
    }, 
    error: function() {} 
}) 

Answer 2

Вы также можете установить оповещение в setTimeout, но сбросить его на каждой итерации, чтобы он запускался только после успешного завершения each.

$.ajax({ 
     type: "GET", 
     url: 'url to json data', 
     dataType: "json", 
     success: function(data) { 
     var time = 10; 
     var t=setTimeout(function(){alert('finished');} , 20); 
      $.each(data, function(key, val) { 
      setTimeout(function() { 
      //document.write(val.term); 
       clearTimeout(t); 
       t=setTimeout(function(){alert('finished');} , 20); 
       return; 
      }, time); time += 10; 
      }); 
     }, 
     error: function() {} 
    })