创新易联欢迎您!16年高端网站建设品牌

网站建设网页技术插件开发:JS定时器例子讲解

日期:2014-08-26 | 来源:易联网站建设公司 | 阅读:

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

 

 

       本文由深圳网站建设公司:创新互联整理,转载时请保留此链接,谢谢合作!

—— 微信公众号 ——

热门标签