One js timer per day

We know that there are two types of JS timers

1. Window.settimeout ([function],[interval]) : Sets a timer and executes the corresponding method when the specified time is reached.

2. Window.setinterval ([function],[interval]): Sets a timer and executes the corresponding method when the specified time is reached.

Without further ado, let’s go to code

var count = 0 ;
setTimeout(function(){
    console.log(++cout) / / = > 1
},1000)

var count1 = 0 ;
setInterval(function(){
    console.log(++cout) / / = > 1
},1000)
Copy the code

• Timer return value: When we set a timer (whatever it is), we get another return value. This return value is a number representing the number of timers set in the current browser (the return value is the serial number of timers).

So let’s go ahead and do the code

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
Copy the code

1. As can be seen from the above, although the two different timers deal with different requirements, they are both browser timers, so when setting, the serial numbers returned are in order
2. When setInterval is set, there is a return value, no matter how many times it is executed. The serial number of the dia table remains the same.

Clear timer (manually unless the browser is closed)

• ClearTimeout ([Queue number of timer])
• ClearInterval ([Queue number of timer])

var t1 = setTimeout(function(){
    // When the method completes, clear the timer
    clearTimeout(t1);
    clearInterval(t1)
    t1 = null;
    // Manually copy the serial variable to NULL, which is equivalent to tearing up the queued paper and throwing it away
},1000)
Copy the code

Below we combine the timer to achieve lazy loading, lazy loading implementation please refer to how to achieve lazy loading pictures

~function(){
    function lazyImg(curImg){
        curImg.isload = true;// Avoid reprocessing the isLoad attribute
        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)
        // All browsers have a minimum response time (Google 5-7 is, IE 10-13s...) So we generally take 17s as the best time for a timer
    }
    return{// The module entry controls the execution sequence in the entryInit:function(){
            lazyImg()
        }
    }
}()
var t1 = setTimeout(function(){
    // When the method completes, clear the timer
    clearTimeout(t1);
    / / or clearInterval (t1)
    t1 = null;
    // Manually copy the serial variable to NULL, which is equivalent to tearing up the queued paper and throwing it away
},1000)
Copy the code