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; })();