阅读 2375

每天一篇js 之定时器

我们知道js定时器一共有两种

  1. window.setTimeout([function],[interval]) :设置一个定时器,当到达指定时间后执行对应方法(执行一次定时器就结束了)
  2. window.setInterval([function],[interval]):设置一个定时器,当到达制定时间后,执行对应方法(以后每间隔这么长时间都要从新执行定时器中的方法,直到定时器清除为止,执行很多次)
不多说,我们上代码
var count = 0 ;
setTimeout(function(){
    console.log(++cout) //=> 1
},1000)

var count1 = 0 ;
setInterval(function(){
    console.log(++cout) //=> 1
},1000)
复制代码
  • 定时器的返回值:当我们设置定时器(不管是那种定时器),都会又一个返回值,这个返回值是一个数字,代表在当前浏览器中设置的第几个定时器(返回值是定时器的序号)
继续上代码
var count = 0 ;
var timer1 = setTimeout(function(){
    console.log(++cout) //=> 1
},1000)
console.log(timer1)//=> 1

var count1 = 0 ;
var timer2 = setInterval(function(){
    console.log(++cout) //=> 1
},1000)
console.log(timer2)//=> 2
复制代码
  1. 从上面可以看出,两种不同的定时器虽然是处理不同需求的定时器,但是都是浏览器的定时器,所以设置的时候,返回的序号是依次排列的
  2. 而且setInterval设置完成时会有一个返回值,不管执行多少次,嗲表序号的返回值不变(设置定时器就有返回值,执行多少次是定时器的处理)

清除定时器 (手动清除,除非把浏览器关掉)

  • clearTimeout([定时器的排队序号])
  • clearInterval([定时器的排队序号])
var t1 = setTimeout(function(){
    //当方法执行完成之后,清除定时器
    clearTimeout(t1);
    clearInterval(t1)
    t1 = null;
    //手动把序号的变量复制为null,相当于把排队好的纸条撕毁扔掉
},1000)
复制代码

下面我们结合定时器实现懒加载,懒加载的实现请参考如何实现图片懒加载

function(){
    function lazyImg(curImg){
        curImg.isload = true;//避免重复处理isLoad属性
        var tempImg = new Image;
        tempImg.onload = function(){
            curImg.src = tempImg.src;
            curImg.style.display = 'block';
            imgFade(curImg);
            tempImg = null;
        }
        tempImg.src = curImg.getAttribute('data-img');
    }
    function imgFade(curImg){
        var n = 0;
        var timer = setTimeout(function(){
            if(n > 1){
                clearInterval(timer);
                timer = null;
                return;
            }
            n += 0.05;
            utils.css(curImg,'opacity',n)
        },17)
        //浏览器都有个最小反应时间(谷歌5-7是,ie 10-13s...)所以我们一般把17s当作定时器的最佳时间
    }
    return{//模块入口,在入口控制执行顺序
        init:function(){
            lazyImg()
        }
    }
}()
var t1 = setTimeout(function(){
    //当方法执行完成之后,清除定时器
    clearTimeout(t1);
    //或者clearInterval(t1)
    t1 = null;
    //手动把序号的变量复制为null,相当于把排队好的纸条撕毁扔掉
},1000)
复制代码
文章分类
前端
文章标签