jQuery: using setInterval and setTimeout

Question

我有一些带有setInterval和setTimeout的jQuery代码。

这似乎每 6 秒工作一次：

var vasen = 0;
setInterval(function() {
vasen++;
$('#valvonta').stop(true,true).css("left", vasen);
var valvonta = 1;
var kilpailu = 12;
jQuery.post("ilmoittautuneet.php", {
valvonta: valvonta,
kilpailu: kilpailu
}).done(function(data) {
});
}, 6000);

但这不会每 6 秒工作一次。它只工作一次。原因是什么？

var vasen = 0;
(function valvonta() {
vasen++;
$('#valvonta').stop(true,true).css("left", vasen);
var valvonta = 1;
var kilpailu = 12;
jQuery.post("ilmoittautuneet.php", {
valvonta: valvonta,
kilpailu: kilpailu
}).done(function(data) {
});
setTimeout(valvonta, 6000);
})();

Answer 1

您的问题在于您正在覆盖valvonta在此行中引用的内容：

var valvonta = 1;

这意味着valvonta将不再引用函数本身，而是1。因此，函数在第一次运行后失败。要解决此问题，只需使用另一个变量名称：

var vasen = 0;
(function valvonta() {
vasen++;
$('#valvonta').stop(true,true).css("left", vasen);
// Rename variables so they don't override `valvonta`
var v = 1;
var k = 12;
jQuery.post("ilmoittautuneet.php", {
valvonta: v,
kilpailu: k
}).done(function(data) {
});
setTimeout(valvonta, 6000);
})();

此解决方案虽然功能强大，但仍然使其可读性不强。简单地在IIFE中打电话给setInterval怎么样？

var vasen = 0;
(function () {
// Declare function to be called recursively
var valvonta = function() {
vasen++;
$('#valvonta').stop(true,true).css("left", vasen);
// Rename variables so they don't override `valvonta`
var v = 1;
var k = 12;
jQuery.post("ilmoittautuneet.php", {
valvonta: v,
kilpailu: k
}).done(function(data) {
});
};
// Recursively call function
setInterval(valvonta, 6000);
})();

更新：我有一种感觉，你可能想在 AJAX 的done回调之后调用该函数。如果是这种情况，您将需要重新设计上面的逻辑：

var vasen = 0;
(function () {
// Declare function to be called recursively
var valvonta = function() {
vasen++;
$('#valvonta').stop(true,true).css("left", vasen);
// Rename variables so they don't override `valvonta`
var v = 1;
var k = 12;
// Store AJAX promise in variable
var ajaxCall = jQuery.post("ilmoittautuneet.php", {
valvonta: v,
kilpailu: k
});
// When AJAX promise is resolved
ajaxCall.done(function() {
setTimeout(valvonta, 6000);
});
};
// Call function for the first time
valvonta();
})();