Question

我遇到连续轮询$ .ajax请求的问题。我遇到的问题是如何让它立即执行，然后在setTimeout调用中设置的时间间隔执行。

代码示例：

＆＃13;

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() {
	setTimeout(function() {
		console.log('loadData ran....');
		return 	$.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;
				loadData();
				myObj.displayItems();
			},
		});
	}, 3000);
	})();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="content"></div>
</body>
</html>

＆＃13;

每当我重构在函数内部进行setTimeout调用时，我都会遇到错误。如果我让函数不能自动执行，我也会遇到错误。

Answer 1

我不确定您是否按照我理解的方式使用“重构”，但重构代码将有助于诊断问题。你所拥有的深层嵌套函数很少是必需的，而且几乎总是令人困惑。这是一个快速的＆amp;脏的重构去除嵌套。我不确定它是否真的能实现你的目标，但它确实可以不间断地执行。 DEMO：

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);

还有一些需要改进的地方：

删除output和items中全局保存的状态。 output对象可以很容易地将myObj重构为状态，items应该是displayItems()函数的参数。
当你在这里时，重命名myObj：）
我不确定setTimeout是否在这里使用正确的函数;如果你真的想要每隔3秒重复一次，为什么不用setInterval来代替？

Answer 2

如果我理解正确，那么这应该适合你。见here

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);
            },
        });
    })();
});

我改变的唯一部分是你的loadData函数。该方法仍在立即调用，但我将window.setTimeout()移动到成功回调中（我将超时更改为10秒进行测试）。这会在上一次成功回调之后设置超时，从而有效地设置轮询。

如果您观看控制台，您可以看到loadData()立即执行，并且每次后续呼叫都会在上次呼叫后10秒执行。

希望这会有所帮助。如果还有其他任何我可以帮到你的，请告诉我。

连续轮询$ .ajax请求问题

2 个答案: