閉包的應用場景

setTimeout,click

timer

http://blog.csdn.net/yanghua_kobe/article/details/6780181

場景一：采用函數引用方式的setTimeout調用（和click一樣）

 

閉包的一個通常的用法是為一個在某一函數執行前先執行的函數提供參數。例如，在web環境中，一個函數作為setTimeout函數調用的第一個參數，是一種很常見的應用。

setTimeout將要執行的函數(或者一段javascript代碼，但這不是我們要討論的情況)作為它的第一個參數，下一個參數是需要延遲執行的時間。如果一段代碼想通過setTimeout來調用，那么它需要傳遞一個函數對象的引用來作為第一個參數。延遲的毫秒數作為第二個參數，但這個函數對象的引用無法為將要被延遲執行的對象提供參數。

但是，可以調用另一個函數來返回一個內部函數的調用，將那個內部函數對象的引用傳遞給setTimeout函數。內部函數執行時需要的參數，在調用外部函數時傳遞給它。setTimeout在執行內部函數時無需傳遞參數，因為內部函數仍然能夠訪問外部函數調用時提供的參數

var p1 = "ss";
    var p2 = "jj";
    function testSetTime(para1,para2){
        return (function(){
            console.log(para1 + "-" + para2);
        })
    }
    var test = testSetTime(p1, p2);
    setTimeout(test, 1000);
    setTimeout(function(){
        console.log(p1 + "-" + p2)
    },1000)

場景二：Singleton 單件（每個js都這么用的，其實就是代碼模塊化）

http://coolshell.cn/articles/6731.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var singleton = function () {      var privateVariable;      function privateFunction(x) {          ...privateVariable...      }        return {          firstMethod: function (a, b) {              ...privateVariable...          },          secondMethod: function (c) {              ...privateFunction()...          }      }; }();

這個單件通過閉包來實現。通過閉包完成了私有的成員和方法的封裝。匿名主函數返回一個對象。對象包含了兩個方法，方法1可以方法私有變量，方法2訪問內部私有函數。需要注意的地方是匿名主函數結束的地方的'()’，如果沒有這個'()’就不能產生單件。因為匿名函數只能返回了唯一的對象，而且不能被其他地方調用。這個就是利用閉包產生單件的方法。

 base,salesModel每個頁面都只有一個，都是單件。

 

http://yuiblog.com/blog/2006/11/27/video-crockford-advjs/

http://codethoughts.info/javascript/2015/05/22/javascript-closure-inside-out/

場景三：單例模式（本質上一樣，只是不同用途）

但凡寫過代碼的人應該對單例模式都不陌生，這里我也就不在多闡述了，直接上代碼：

var Singleton = (function () {
    var instance;

    function createInstance() {
        return new Object("I am the instance");
    }
 
    return {
        getInstance: function () {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();
 
function run() {
 
    var instance1 = Singleton.getInstance();
    var instance2 = Singleton.getInstance();
 
    console.log("Same instance? " + (instance1 === instance2));  
}

 我們是這么用的,jQuery就是

//單例模式
    (function(){
        var instanced;
        var index = function(){
            this.name = "sss";
        }
        index.prototype = {
            init: function(){
                console.log("start")
            },
            instance: function(){
                if(!instanced){
                    instanced = new index();
                }
                return instanced;
            }
        }
        new index().instance().init();
    })()

 

場景四：要clear自身timer

$(".outer").each(function () {
    var el = this
    var s = Number($(el).attr("data-seconds")) || 0
    //attr得到的是字符串，先轉換成數字，避免NaN。給默認為0
    var id = setInterval(function () {//閉包
        $(el).html(s--)
        if (s === 0) {
            $(el).html("倒時計結束!")
            clearInterval(id)
        }

    }, 1000)
})

 使用閉包的正確姿勢：保留一下公用變量

function show(data, ele) {
        (ele || $("body")).append('<li>' + data + '</li>')
    }
    function task1(name, fn){
        setTimeout(function(){
            fn(name)
        }, 500)
    }
    function task2(name, fn){
        setTimeout(function(){
            fn(name)
        }, 1000)
    }
    var taskNuns = function(){
        var num = 2;
        return function() {//使用閉包保留了num;
            if (num === 1) {
                show("任務都完成了", $("#aaron1"))
            }
            num--;
        }
    }()
    $("#aaron1").click(function(){
        //
        task1('任務一', function(name){
            //點擊並且500ms后
            console.log(name);
            show("task1", $("#aaron1"));
            taskNuns();
        })
        task2('任務二', function(name){
            //點擊並且500ms后
            console.log(name);
            show("task2", $("#aaron1"));
            taskNuns();
        })
    })

http://www.imooc.com/code/3747