匿名 javascript 轮询函数不会立即触发 setTimeout ajax 调用

Question

我有一个匿名轮询函数，它有一个setTimeout，每30秒启动一次ajax调用。 但是，匿名函数确实会立即启动，但由于某种原因，ajax 调用不会立即启动，而是仅在 30 秒后启动。 我是否错过了立即调用它以立即触发之类的东西？

(function poll() {
console.log('polling called');
setTimeout(function () {
$.ajax({
url: "/server/call",
type: 'GET',
dataType: "json", 
timeout: 30000,
success: function (data) {
var currentdate = new Date();
var datetime = "Last Sync: " +                  currentdate.getDate() + "/" + (currentdate.getMonth() + 1) + "/"
+ currentdate.getFullYear() + " @ "
+ currentdate.getHours() + ":"
+ currentdate.getMinutes() + ":"
+ currentdate.getSeconds();
console.log(datetime);
console.log('call was successful at: ' + datetime);
}
});
},
30000);
})();

日志记录仅在 30 秒后开始，而不是立即开始。 谢谢

Answer 1

如果你正在编写一些轮询函数，你必须在前一个完成后发送请求。服务器必须在几秒钟后响应浏览器。此时，服务器处理所有其他请求。下面是示例：

(function poll() {
console.log('polling called');
$.ajax({
url: "/server/call",
type: 'GET',
dataType: "json",
timeout: 30000,
success: function (data) {
var currentdate = new Date();
var datetime = "Last Sync: " + currentdate.getDate() + "/" + (currentdate.getMonth() + 1) + "/"
+ currentdate.getFullYear() + " @ "
+ currentdate.getHours() + ":"
+ currentdate.getMinutes() + ":"
+ currentdate.getSeconds();
console.log(datetime);
console.log('call was successful at: ' + datetime);
},
complete: function () {
setTimeout(function () {
poll()
}, 200) //do nothing 200ms
}
});
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

这不是setTimeout()所做的。setTimeout()调用其函数一次，并且仅在给定时间到期后调用。

setInterval()接近您想要的，但即使这样也只是在间隔过期一次后第一次调用该函数。

您需要做的是：

const everyThree = () => 
$.ajax({
url: "/server/call",
type: 'GET',
...
everyThree();
setInterval(everyThree, 3000);

如果您不喜欢使用setInterval()，您可以手动执行相同的操作：

const everyThree = () => {
setTimeout(everyThree, 3000); 
$.ajax({
url: "/server/call",
type: 'GET',
...
everyThree();

如果您怀疑 AJAX 调用可能会运行很长时间，则可以执行以下操作：

const everyThree = () => 
$.ajax({
url: "/server/call",
type: 'GET',
...
})
.always(() => setTimeout(everyThree, 3000)); 
everyThree();

这将使下一个 AJAX 调用在前一个调用成功、失败或超时 3 秒后进行。

编辑：

如果您的环境中没有const或=>("胖箭头")，则您的选择是

1. 凑合着用var和function. 它们在许多方面都较差，但普遍可用。
2. 使用像 Babel 这样的转译器，获得现代语言的所有优势(常量、简单的匿名函数、解构、数组扩展)，代价是操作环境的复杂性略有增加。