Javascript 连续轮询$.ajax请求问题

我遇到了一个持续轮询$.ajax请求的问题。我遇到的问题是如何让它首先立即执行，然后按照setTimeout调用中设置的间隔执行

代码示例：

myObj={}；
var输出=“”；
var项目=“”；
myObj.displayItems=函数（）{
log（'displayItems run'）；
输出=''；
$。每个（项目、功能（索引、val）{
输出+='
'+val.player.firstName+'+val.player.lastName+'
'；
});
$（'#content'）.html（输出）；
};
$（文档）.ready（函数（）{
（函数loadData（）{
setTimeout（函数（）{
log（'loadData已运行…'）；
返回$.ajax({
url:“//jsbin.com/xinixa/1.json”，
键入：“GET”，
数据类型：“json”，
cache:false，
成功：功能（数据）{
items=data.apiResults[0]。league.season.draft.rounds[0]。picks；
loadData（）；
myObj.displayItems（）；
},
});
}, 3000);
})();
});

JS-Bin
我不确定您是否按照我的理解使用了“重构”，但重构代码将有助于诊断问题。像您这样的深度嵌套函数很少是必需的，而且几乎总是令人困惑。这里有一个快速而肮脏的重构来移除嵌套。我不确定它是否真的实现了你的目标，但它确实在不断地执行，没有错误

var myObj={}；
var输出=“”；
var项目=“”；
myObj.displayItems=函数（）{
log（'displayItems run'）；
输出=''；
$。每个（项目、功能（索引、val）{
输出+='
'+val.player.firstName+'+val.player.lastName+'
'；
});
$（'#content'）.html（输出）；
};
var loadData=function（）{
设置超时（makeAjaxRequest，3000）；
};
var makeAjaxRequest=函数（）{
log（'makeAjaxRequest running'）；
返回$.ajax({
url:“//jsbin.com/xinixa/1.json”，
键入：“GET”，
数据类型：“json”，
cache:false，
success:successHandler，
});
};
var successHandler=函数（数据）{
items=data.apiResults[0]。league.season.draft.rounds[0]。picks；
loadData（）；
myObj.displayItems（）；
};
$（文档）.ready（加载数据）；

还有几个需要改进的地方：


删除
输出
和
项
中全局保存的状态
output
可以很容易地重构为
myObj
对象上的状态，
items
应该是
displayiitems（）
函数的一个参数

当您使用时，请重命名myObj

：）

我不确定这里使用的

setTimeout

函数是否正确；如果你真的想要每3秒钟重复一次的东西，为什么不使用呢

---

如果我理解正确，那么这应该对你有用。看到了吗

myObj={}；
var输出=“”；
var项目=“”；
myObj.displayItems=函数（）{
log（'displayItems run'）；
输出=''；
$。每个（项目、功能（索引、val）{
输出+='
'+val.player.firstName+'+val.player.lastName+'
'；
});
$（'#content'）.html（输出）；
};
$（文档）.ready（函数（）{
（函数loadData（）{
log（'loadData已运行…'）；
$.ajax({
url:“//jsbin.com/xinixa/1.json”，
键入：“GET”，
数据类型：“json”，
cache:false，
成功：功能（数据）{
items=data.apiResults[0]。league.season.draft.rounds[0]。picks；
myObj.displayItems（）；
setTimeout（加载数据，10000）；
},
});
})();
});

我唯一更改的部分是在loadData函数中。该方法仍在立即调用，但我将

窗口.setTimeout（）

移到了成功回调中（我将超时更改为10秒以进行测试）。这将在上次成功回调后设置超时，从而有效地设置轮询

如果您观察控制台，您可以看到

loadData（）

立即执行，并且每个后续调用在上一次调用后10秒执行

---

希望这有帮助。如果还有什么需要我帮助的，请告诉我。

请在问题中包含您的代码；如果你的链接死了，这个问题对将来有同样问题的读者会有什么用呢？根据我所读的，setTimeout是在setInterval上使用的首选方法，因为使用setInterval可以备份请求。而使用myObj只是为了这个例子。真正的代码使用了更好的名称空间。与重构一样，由于setTimeout包装的makeAjaxRequest，解决方案仍然存在在就绪时不立即执行的问题。在就绪处理程序中执行

makeAjaxRequest

，然后执行

loadData

。它仍然允许您从逻辑上将函数分离出来，并划分为单元可测试的块。

var myObj = {};
var output = '';
var items = '';

myObj.displayItems = function() {
  console.log('displayItems ran');
  output = '';
  $.each(items, function(index, val) {
    output += '<li>' + val.player.firstName + ' ' + val.player.lastName + '</li>';
  });
  $('#content').html(output);

};

var loadData = function() {
  setTimeout(makeAjaxRequest, 3000);
};

var makeAjaxRequest = function() {
  console.log('makeAjaxRequest running');
  return    $.ajax({
    url: '//jsbin.com/xinixa/1.json',
    type: 'GET',
    dataType: 'json',
    cache: false,
    success: successHandler,
  });
};

var successHandler = function(data) {
  items = data.apiResults[0].league.season.draft.rounds[0].picks;
  loadData();
  myObj.displayItems();
};

$(document).ready(loadData);

myObj = {};

var output = '';
var items = '';
myObj.displayItems = function () {
    console.log('displayItems ran');
    output = '';
    $.each(items, function (index, val) {
        output += '<li>' + val.player.firstName + ' ' + val.player.lastName + '</li>';
    });
    $('#content').html(output);
};

$(document).ready(function () {
    (function loadData() {
        console.log('loadData ran....');
        $.ajax({
            url: '//jsbin.com/xinixa/1.json',
            type: 'GET',
            dataType: 'json',
            cache: false,
            success: function (data) {
                items = data.apiResults[0].league.season.draft.rounds[0].picks;
                myObj.displayItems();
                setTimeout(loadData, 10000);
            },
        });
    })();
});