Почему не выполняются вызовы ajax с указанной задержкой

Question

Я пытаюсь вызвать действие на контроллере с помощью ajax: 10 раз с 2-секундной задержкой в ​​моем приложении MVC5.

Вот код, который я написал:

$(document).ready(function() { 

    (function loop(i) { 
     setTimeout(function() { 
      var d = new Date(); 
      console.log(d.getTime()); 
      callAjax(); 
       console.log("works " + i); 
       if (--i) loop(i); 
      }, 
      2000); // ms 
    })(10); 

    function callAjax() { 
     $.ajax({ 
      url: '/Home/StartElection', 
      type: 'POST', 
      data: "test", 
      async: true 
     }) 
      .done(function (partialViewResult) { 
       $("#partialTable").html(partialViewResult); 
      }); 
    }; 
}); 

Журнал консоли, как и ожидалось (с секундной задержкой 2), но вызовы контроллера происходят мгновенно - когда я поставил перерыв в Visual Studio на действии контроллера следующего вызова после продолжения занимает 2 мс

Я не понимаю, почему это происходит - может ли кто-нибудь помочь?

Edit: Я добавил журнал консольной Date.getTime() как раз перед вызовом АЯКСА & есть 2000 мс между каждым

Answer 1

Вы должны изменить эту строку в одиночку асинхра: правда -> асинхронной лжи , потому что вызовы AJAX будут сделаны асинхронными, если для этого свойства установлено значение true. И поэтому ваши призывы ajax не имеют временной задержки. Надеюсь, это поможет.

Answer 2

Что касается вашего кода на стороне клиента, он, похоже, работает хорошо, как касается вызовов. С учетом сказанного здесь несколько вещей, которые следует учитывать при работе с ajax:

1) У вас есть контроль над количеством раз, когда вы можете позвонить удаленному сервису, но у вас нет контроля над временем, которое потребуется для этой услуги ответить.

2) Как правило, в большинстве случаев обычной практикой является не выполнение аякс-вызовов в цикле (это несколько поражает общую цель ajax). Скорее используйте ответ на каждый вызов, а затем выполните следующий вызов (но тогда, конечно, нам нужно будет точно знать, что именно вы пытаетесь построить, чтобы предложить точное решение).

Так, ближе всего к тому, что вы ищете с помощью Ajax, я думаю, было бы больше что-то вроде этого:

$(document).ready(function() { 

    /*(function loop(i) { 
     setTimeout(function() { 
      var d = new Date(); 
      console.log(d.getTime()); 
      callAjax(); 
       console.log("works " + i); 
       if (--i) loop(i); 
      }, 
      2000); // ms 
    })(10);*/ 

    var i=0; 
    function callAjax() { 
     var requestTimeMessage = "fetch #"+i+" at: "+new Date().getTime(); 
     console.log(requestMessage); 

     $.ajax({ 
      url: '/Home/StartElection', 
      type: 'POST', 
      data: "test", 
      async: true 
     }) 
      .done(function (partialViewResult) { 
       var requestTimeMessage = "response #"+i+" at: "+new Date().getTime(); 
       console.log(requestMessage); 

       $("#partialTable").html(partialViewResult); 
       i++; 
       if(i<10) { 
        /*Note this assumes a quick response for each call. 
        * Otherwise the response together with this delay will total a wait longer than 2 seconds. 
        */ 
        setTimeout(function() { 
         callAjax(); 
        2000); 
       } 
      }); 
    }; 
}); 

Но, как я сказал. Мне нужно будет точно знать, чего вы пытаетесь достичь, чтобы дать более подходящий ответ на ваш вопрос.