jQuery：使用setInterval和setTimeout

Question

我有一些jQuery代碼setInterval和setTimeout。

這似乎是每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); 
})(); 

更新：我有，你可能要調用的函數後done回調您的AJAX的感覺。如果是這樣的話，你就需要重新修改上面的邏輯：

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