摘要：這里是結(jié)論，將是更驚艷的那一個(gè)。瀏覽器隔一段時(shí)間像服務(wù)器發(fā)送一個(gè)請求，詢問這里有沒有需要更新的消息。在響應(yīng)回來時(shí)，才會繼續(xù)發(fā)出第二個(gè)請求。但是，顯然的，這對我們要做的事來說并不算是什么問題。

我們都知道的是setTimout是用來延遲一個(gè)簡單的動作的，然而，setInterval的目的是用來重復(fù)執(zhí)行某個(gè)動作的。

然后，以上只是一半的事實(shí)。因?yàn)槿绻粋€(gè)函數(shù)需要在一個(gè)間隔時(shí)間內(nèi)重復(fù)的執(zhí)行，你也可以輕松的使用 setTimeout 設(shè)定延遲時(shí)間，被延遲執(zhí)行的函數(shù)再進(jìn)行自調(diào)用以此實(shí)現(xiàn)循環(huán)。

所以，這里有2種方法做同樣的事

一個(gè)用setInterval

var doStuff = function () {
  // Do stuff
};
setInterval(doStuff, 1000);

一個(gè)用setTimeout

var doStuff = function () {
    // DoStuff
    setTimeout(doStuff, 1000); 
};
setTimeout(doStuff, 1000);

// 如果你想立即執(zhí)行函數(shù)，可以這樣寫
var doStuff = function () {
    setTimeout(doStuff, 1000);
}
doStuff();

// 或者，更酷的方式，使用立即執(zhí)行函數(shù)
(function doStuff () {
   // Do Stuff
   setTimeout(doStuff, 1000);
}())

這必然導(dǎo)致下面兩個(gè)問題

問題：setInterval和self-invoking setTimeout-loops是可以互相替換的嗎?
答案：不，當(dāng)然不行。它們之間有著很細(xì)微的區(qū)別，但是如果想寫出好的代碼，這些細(xì)微的區(qū)別便是你想知道的事。

當(dāng)然，接下我將會訴說的，第一，我將告訴你，我們通常會遇到什么樣的問題，第二，我將開始介紹它們之間細(xì)微的區(qū)別，這些區(qū)別將讓我們從這兩個(gè)選擇中選出更具吸引力的那個(gè)一，第三，我將告訴你其實(shí)根本不用關(guān)心另一個(gè)。然后。這里是結(jié)論，setTimeout將是更驚艷的那一個(gè)。接下來我將一點(diǎn)一點(diǎn)解釋。

首先：如果你試著重復(fù)調(diào)用的函數(shù)并不會化太多的時(shí)間來跑，那么將不會有任何問題。即使如此，被調(diào)用的函數(shù)依然會出現(xiàn)2中不同的情況：它既可以在CPU上高集中的運(yùn)行腳本，或者它也可以在腳本流外先發(fā)出一個(gè)命令，并等待結(jié)果的到來。

我們主要研究先看第二種情況。典型的便是ajax回調(diào)：你的腳本并不會等待服務(wù)器的響應(yīng)，它會自己執(zhí)行到最后，并讓回調(diào)函數(shù)來監(jiān)聽ajax響應(yīng)。

現(xiàn)在，一些網(wǎng)站想要你保持實(shí)時(shí)更新，像Gmail，當(dāng)你獲得一封新的郵件時(shí)便會刷新你的郵箱。這里服務(wù)端有新消息時(shí)便實(shí)時(shí)通知瀏覽器端的技術(shù)，通常叫做ajax輪詢。瀏覽器隔一段時(shí)間像服務(wù)器發(fā)送一個(gè)請求，詢問這里有沒有需要更新的消息。

你也許會想，你很擅長使用setInterval

// 不要這樣做
var pollServerForNewMail = function () {
  $.getJSON("/poll_newmail.php", function (response) {
    if (response.newMail) {
      alert(
        "New mail. At last. You made me walk all the way to the server and back every " +
        "second for this, so if this isn"t life-or-death, you got another thing coming."
      );
    }
  });
};
setInterval(pollServerForNewMail, 1000);

其實(shí)像上面那樣寫并不好。因?yàn)檎埱蟀l(fā)送出去到回來是需要時(shí)間的，但是這段時(shí)間誰能保證會比你設(shè)置的間隔時(shí)間要短呢？

一個(gè)典型的初學(xué)者的錯(cuò)誤，會想將輪詢的間隔時(shí)間設(shè)置的長一點(diǎn)也許可以解決這個(gè)問題。然后，事實(shí)是，無論你的間隔時(shí)間設(shè)的是多少，它依然有可能比，ajax響應(yīng)的時(shí)間短。也就是說，有可能會發(fā)生，第一個(gè)請求還沒回來的情況下，第二請求又已經(jīng)發(fā)出去了。而你需要的是兩個(gè)請求之間有呼吸的空間，而setTimeout便可以解決這個(gè)問題。

(function pollServerForNewMail() {
  $.getJSON("/poll_newmail.php", function (response) {
    if (response.newMail) {
      alert(
        "You have received a letter, good sir. " + 
        "I will have a quick lie-down and be on my way shortly."
      );
    }
    setTimeout(pollServerForMail, 1000);
  });
}());

在第一次發(fā)出請求，服務(wù)器響應(yīng)之前，不會發(fā)生任何事。在響應(yīng)回來時(shí)，才會繼續(xù)發(fā)出第二個(gè)請求。當(dāng)然，這也就意味著，兩個(gè)輪詢之間的時(shí)間超過了1秒，這也依賴于各種各樣的因素，像網(wǎng)速和服務(wù)器的響應(yīng)速度等。但是，顯然的，這對我們要做的事來說并不算是什么問題。

這里有兩個(gè)例子來更好的進(jìn)行說明。

var timesRun = 0;
var startTime = new Date().getTime();

var doStuff = function () {
  var now = new Date().getTime();

  // 只跑5次
  if (++timesRun == 5) clearInterval(timer);

  console.log("Action " + timesRun + " started " + (now - startTime) + "ms after script start");

  // Waste some time
  for (var i = 0; i < 100000; i++) {
    document.getElementById("unobtanium");
  }

  console.log("and took " + (new Date().getTime() - now) + "ms to run.");
};

var timer = setInterval(doStuff, 1000);

下面是結(jié)果

Action 1 started 1000ms after script start
and took 8ms to run.
Action 2 started 2000ms after script start
and took 8ms to run.
Action 3 started 3004ms after script start
and took 6ms to run.
Action 4 started 4002ms after script start
and took 6ms to run.
Action 5 started 5000ms after script start
and took 6ms to run.

這里并沒有多大的意外。這段代碼中間的循環(huán)花了一點(diǎn)時(shí)間，但是setInterval依然很嚴(yán)格的執(zhí)行了它的計(jì)劃。在一秒的間隔之間，開始時(shí)間之間并沒有一點(diǎn)空隙。

現(xiàn)在是setTimeout-loop的例子

var timesRun = 0;
var startTime = new Date().getTime();

var doStuff = function () {
  var now = new Date().getTime();

  console.log("Action " + (timesRun + 1) + " started " + (now - startTime) + "ms after script start");

  // Waste some time
  for (var i = 0; i < 100000; i++) {
    document.getElementById("unobtanium");
  }

  console.log("and took " + (new Date().getTime() - now) + "ms to run.");

  // Run only 5 times
  if (++timesRun < 5) {
    setTimeout(doStuff, 1000);
  }
};

setTimeout(doStuff, 1000);

輸出結(jié)果

Action 1 started 1010ms after script start
and took 8ms to run.
Action 2 started 2021ms after script start
and took 8ms to run.
Action 3 started 3031ms after script start
and took 5ms to run.
Action 4 started 4037ms after script start
and took 6ms to run.
Action 5 started 5043ms after script start
and took 6ms to run.

這里也并沒有太多的意外。我們已經(jīng)知道setTimeout-loop并不會嚴(yán)格的執(zhí)行計(jì)劃，而是在函數(shù)下一次調(diào)用之前，會給函數(shù)它足夠的時(shí)間執(zhí)行它里面的代碼。

不要使用setInterval,如果你在乎你的時(shí)間。setTimeout-loop可以給你足夠的時(shí)間控制你的腳本和回調(diào)，