jQuery：使用setInterval和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();
})();