JS定时器setTimeout与setInterval用法分析及实例详解定时器可以说是js前端最常用的工具,几乎所有的逐渐变化的动态效果都会使用到定时器,比如说图片滚动(位置渐变)。渐隐渐现。拖拽(不使用计时器会多消耗大量资源)等等。我准备近几天写3篇文章,第一篇是计时器,第二篇说下scrollLeft(right...)的用法,第三篇顺理成章的介绍无间断滚动的实现方法。
这篇文章主要针对js入门新手,或者基础不扎实的半路出家js程序员。还有我可爱的实习生们。(下图是正能用到这篇文章的实习生中的一部分)
在javascritp中,有两个关于定时器的专用函数,分别为:
1.倒计定时器:timename=setTimeout("function();",delaytime);
2.循环定时器:timename=setInterval("function();",delaytime);
第一个参数“function()”是定时器触发时要执行的动作,可以是一个函数,也可以是几个函数,函数间用“;”隔开即可。比如要弹出两个警告窗口,便可将“function();”换成
“alert('第一个警告窗口!');alert('第二个警告窗口!');”;而第二个参数“delaytime”则是间隔的时间,以毫秒为单位,即填写“5000”,就表示5秒钟。
倒计时定时器是在指定时间到达后触发事件,而循环定时器就是在间隔时间到来时反复触发事件,两者的区别在于:前者只是作用一次,而后者则不停地作用。
比如你打开一个页面后,想间隔几秒自动跳转到另一个页面,则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ,而如果想将某一句话设置成一个一个字的出现,
则需要用到循环定时器“setInterval("function();",delaytime)” 。
获取表单的焦点,则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
比如:if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。
/**
* 定时器
* @param {string} id 定时器标识,可通过他来直接调用定时器
* @param {number} delay 定时器延迟时间,单位ms
* @param {Function} fn 回调
* @return {object} timer实例
*/
window.timer = function(){
var cache = {};
var expando = "timer-"+ (+new Date);
var count = 0;
return function(id,delay,fn){
if(cache[id]){
return cache[id]
}
return new _class(id,delay,fn);
}
function _class(id,delay,fn){
var self = this;
self.id = id || expando + (count++);
self._time = null;
self.delay = delay || 1000;
self._list = [];
self._load = false;
var init = function () {
if(fn){
self.add(fn)
}
return (cache[id]=self);
}
/**
* 内部运行方法,运行完后会清除定时器
*/
var run = function(){
for(var i=0,len=self._list.length;i<len;i++){
if(self._list[i]()===false){
break;
}
}
return self.clear();
}
/**
* 添加回调,添加的方法将由先到后执行
* @param {Function} fn 回调方法,如果返回false将在执行的时候退出所有队列,并清空这个定时器
*/
self.add = function(fn){
if("function"!==typeof(fn)){
return self;
}
self._list.push(fn);
if(!self._load&&self._list.length){
self._load = true;
self._time = setTimeout(function(){
run();
},self.delay);
}
return self;
}
/**
* 清空当前定时器
* @return {object} timer实例
*/
self.clear= function(){
self._list = [];
self._load = false;
clearTimeout(self._time);
self._time = null;
delete cache[self.id];
return self;
}
本文由深圳网站建设公司:创新互联整理,转载时请保留此链接,谢谢合作!