定时器,回调

function test(){
    console.log(11);
}
window.setInterval(test,1000);//传的是函数,不是test()

 

var id = setInterval(function(){//会开启倒计时的
        console.log(11);
    }, 1000);

自己写的 完整的

function countDown(div, callback, finishCallback){
    $.each(div, function(index,item){
        var timer = null;//就是利用闭包保留住这个timer
        var seconds = $(this).attr("data-seconds");
        var doWork = function(item){
            if(seconds > 0){
                seconds--;
                callback(seconds,item);
            }else{
                window.clearInterval(timer);
                finishCallback(item);
            }
        }
        timer = window.setInterval(function(){
            doWork(item)
        }, 1000);
    });
}
countDown($(".outer"), function(seconds, item){
    $(item).html(seconds);
}, function(item){
    $(item).html("倒计时结束");
});

用的是这种,尽量避免使用$.fn,因为很可能被覆盖。还是用module.exports吧。

module.exports = function(arr, stepCallback, endCallback){
//实现
}

function main(callback, finishCallback){
        $(this).each(function(index, item){
            var timer = null;
            var seconds = $(this).attr("data-seconds");
            var doWork = function(){
                if(seconds > 0){
                    seconds--;
                    callback(seconds,item);//这是实参,callback实际上在这里运行
                }else{
                    window.clearInterval(timer);
                    if(finishCallback) finishCallback(item);
                }
            }
            timer = window.setInterval(doWork, 1000);
        })
    }
    $.fn.countDown = main;
    $(".outer").countDown(function(seconds, item){//这其实是形参
        $(item).html(seconds);
    },function(item){
        $(item).html("倒计时结束");
    });

大牛精简版

$(".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)
})

 countDown单个执行版

function countDown(){
    var timer = null;
    var seconds = $(this).attr("data-seconds");
    var self = this;
    var doWork = function(){
        if(seconds > 0){
            seconds--;
            $(this).html(seconds);
        }else{
            window.clearInterval(timer);
        }
    };
    timer = window.setInterval(function() {
        console.log(this);//window
        doWork.call(self);//改变作用域
    }, 1000);
};
$(".outer").each(function(index, item){
    countDown.call(this);
})

实际应用版

(function(){
    var countdown = function(item, config){
        var seconds = parseInt($(item).attr(config.attribute));
        var timer = null;
        var doWork = function(){
            if(seconds >= 0){
                if(typeof(config.callback) == "function"){
                    var data = {
                        total : seconds ,
                        second : Math.floor(seconds % 60) ,
                        minute : Math.floor((seconds / 60) % 60) ,
                        hour : Math.floor((seconds / 3600) % 24) ,
                        day : Math.floor(seconds / 86400)
                    };
                    config.callback.call(item, seconds, data, item);
                }
                seconds --;
            }else{
                window.clearInterval(timer);
                if(typeof(config.finishCallback) =="function"){
                    config.finishCallback.call(item);
                }
            }
        }
        timer = window.setInterval(doWork, 1000);
        doWork();
    };
    var main = function(){
        var args = arguments;
        var config = { attribute : 'data-seconds', callback : null, finishCallback: null};
        if(args.length == 1){
            if(typeof(args[0]) == "function") {
                config.callback = args[0];
            }
            if(typeof(args[0]) == "object") $.extend(config, args[0]);
        }else{
            if(typeof(args[0]) == "function"){
                config.callback = args[0];
                config.finishCallback = args[1]||null;
            }else{
                config.attribute = args[0];
                config.callback = args[1];
                config.finishCallback = args[2]||null;
            }
        }
        $(this).each(function(index, item){
            countdown.call(item, item, config);
        });
    };
    $.fn.countdown = main;
})();

 

posted @ 2015-12-25 16:12  darr  阅读(244)  评论(0编辑  收藏  举报