天天一篇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)
复制代码