這兩天在寫一個頁面自動重新整理的jquery外掛，寫這個外掛的過程遇到了一個問題，呼叫setInterval的時候，setInterval需要呼叫函式內部的引數變數。

1. 1 var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
   2 var intervalID = window.setInterval(code, delay);

　　第一行我們可以看到，setInverval可以把函式func呼叫的引數作為setInverval的引數傳遞進來，但是下面這句說明卻潑了我一盆冷水：

　　Note that passing additional parameters to the function in the first syntax does not work in Internet Explorer. If you want to enable this functionality on that browser you must use a compatibility code (see the 

　　也就是說，為setInterval呼叫的func傳遞引數的寫法在IE下無效。IE下測試了一下，執行下面的程式碼：

1. 1 var func = function(param) {
   2     alert(param);
   3 }
   4 var foo = "success!";
   5 setInterval(func, 3000, foo);

　　發現IE10下居然彈出了"success!"，說明在IE10下還是有效的，但是IE7,8,9都華麗麗的彈出了"undefined"。在吐槽了官方說明的不準確之後，還得另尋它法。

　　那麼你會這樣想，為什麼不直接這樣寫:setInterval('func(foo)', 3000)

setInterval使用內部函式

　　但是，如果foo是定義在函式內部的呢？比如下面這段程式碼：

1. 

   1 var outerFunc = function() {
   2     var foo = 'Success!';
   3     var innerFunc = function(param) {
   4         alert(param);
   5     }
   6     setInterval('innerFunc(foo)', 3000);
   7 };
   8 outerFunc();

   

　　執行了之後，console會無情的告訴你：Uncaught ReferenceError: foo is not defined

What's wrong?setInterval確確實實是寫在outerFunc裡面啊！不錯，從outerFunc內部讀取foo變數是妥妥的是能讀出來的，但是你確定setInterval('innerFunc(foo)', 3000)中foo變數是在outerFunc內部讀取的嗎？

　　這裡就涉及到setInterval兩種語法的區別了，第一種setInterval(innerFunc, 3000)，相當於做了下面三件事：

1. var func = innerFunc;將innerFunc傳遞給func形參(其實傳遞的是一個閉包，後面再具體說明)
2. 程式執行3000ms，這期間繼續執行其他程式碼
3. 執行func()，但是3000ms以後，func()的執行是在window物件下了，但是func()能取到outerFunc()內部的變數

　　也就是說，下面的這段程式碼可以彈出'success!'

1. 

   1 var outerFunc = function() {
   2     var foo = 'success';
   3     var innerFunc = function() {
   4         alert(foo);
   5     };
   6     setInterval(innerFunc, 3000);
   7 };
   8 outerFunc();

   

　　而第二種setInterval('innerFunc(foo)', 3000)，只是相當於做了第一種的後面兩件事

1. 程式執行3000ms，這期間繼續執行其他程式碼
2. 執行innerFunc(foo)，這時候innerFunc(foo)就是在window下執行了，連innerFunc都找不到，foo更不用說了

　　結合第一種不能給innerFunc傳遞引數但是卻能讀取outerFunc內部引數的特點，想到用閉包來解決這個問題：

　　具體做法是向setInterval(func, delay)傳遞一個閉包：

1. 

    1 var outerFunc = function() {
    2     var foo = 'success!';
    3     var loop = function() {
    4         innerFunc(foo);
    5     };
    6     var innerFunc = function(param) {
    7         alert(param);
    8     };
    9     setInterval(loop, 3000);
   10 };
   11 outerFunc();

   

　　注意，這裡傳遞的是loop()而不是loop。最後彈出'success!'，表明setInterval中的閉包有效。

回顧閉包

　　A closure is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression).

　　Since a nested function is a closure, this means that a nested function can "inherit" the arguments and variables of its containing function. In other words, the inner function contains the scope of the outer function.

只看紅字部分，首先閉包是函式(典型的情況)，其次，閉包包含了外部函式的作用域鏈。只要建立了對閉包的引用(var func = loop;或者將loop作為實參傳遞給函式)，就相當於變相讀取了外部函式(outerFunc)的變數。

　　寫到這裡，感覺setInterval算是閉包的一個典型應用場景了吧(setTimeout同理)。