Question

我正在尝试调用一次返回一行信息的服务。我将获取100个这样的行。我希望每次点击服务之间有一个特定的时间差距。它不一定非精确，但至少200毫秒。我一直在使用jquery进行通话。类似的东西：

 for 1 to 100
    window.setTimeout(function(rowNumber){
    $.ajax({
    url: 
    datatype: 'json'
    async:false
    success: function to display row
    });
    }, 10000, someParam);

另外，我在xmlhttp.onreadystatechange函数中进行了此调用。发生的事情是我在开始时得到10秒的延迟，但随后所有的行都出现在雪崩中。我需要在每次通话之间延迟。

谢谢！

Answer 1

首先，您需要考虑在服务器中创建批量操作，以便一次性重放所有信息。

另一个重要概念，避免同步连接。在您的情况下，100连接将在此过程中阻止浏览器。

所有元素都在同一时刻写入使用同步，浏览器是用于写入dom中任何元素的块。

https://jsfiddle.net/luarmr/3a81nn9z/

第一个：请记住，浏览器有一个调用限制，用户可以在此配置中更改它，也许它不是您的解决方案，而是将概念引入第二个和第三个解决方案，在这种情况下我们要求同一个请求时刻。

HTML

<ul id="result"></ul>

JS

function insertPosition(pos, text){
    var element = $("#result > li:nth-child(" + (pos+1) + ")"),
        html = '<li>' + text + '</li>';
    if (element.length === 0) {
         $("#result").append(html);
    } else {
       element.before(html);
    }
}

$(document).ready(function() {
    for(var i = 0; i < numberRequest; i++) {        
        $.ajax({
            url: '/echo/html/', 
            type: 'POST',      
            data: 'html=' + i,     
            cache: false,
            success: insertPosition.bind(this, i)
        });    
    }
});

基本上，你在循环中调用ajax，你需要确保在正确的位置添加新元素。 insertPosition测试，如果你已经在该位置有一个元素，如果你有一个函数在它之前插入元素。如果没有，则将元素插入最后位置。另一个重要的是函数bind you can see more here。没有等待，当我有元素时，我将其添加到列表中。

第二个（相同的HTML）：

var callbackFunction = function(num, max, returnhtml){
    num++;
    $("#result2").append('<li>' + returnhtml + '</li>');
    if (num<max) {
        callAjax(num,max);    
    }
};

function callAjax(num,max){
    $.ajax({
        url: '/echo/html/', 
        type: 'POST',      
        data: 'html=' + num,     
        cache: false,
        success: callbackFunction.bind(this, num, max)
    });  
}

$(document).ready(function() {
    callAjax(0,numberRequest);
});

这里的区别是并发连接数。在这种情况下，我们等待响应然后发送下一个请求。我们总是可以插入。

第三种方式：

var callbackFunction2 = function (num, max, returnhtml) {
    num++;
    $("#result3").append('<li>' + returnhtml + '</li>');
    if (num < max) {
        setTimeout(window.callAjax2.bind(window, num, max), 500);
    }
};

function callAjax2(num, max) {
    $.ajax({
        url: '/echo/html/',
        type: 'POST',
        data: 'html=' + num,
        cache: false,
        success: callbackFunction2.bind(this, num, max)
    });
}

$(document).ready(function () {
    callAjax2(0, numberRequest);
});

这只是第二版的更新，超时。实际上我更喜欢你的第二个。

Answer 2

只需将循环变量用作实现该时间的乘数：

  for (var i=0;i<100;i++) {
    window.setTimeout(function(){
      $.ajax({
        url:
        datatype: 'json'
        async: false
        success: function to display row
      });
    }, i * 200);
  }

ajax调用之间的时间延迟

2 个答案: