Js函数节流

一、开始

很多时候一些事件我们希望他一段时间内只被触发一次，比如轮播图之类的，多次点击就会被处理为一次。

这个问题被称作“防抖（节流）”问题，可以通过设置定时器来解决

 

二、模拟

我们模拟一个会被多次触发的事件，这里选用mousemove，每移动一次鼠标就会触发：

var wra = document.getElementById('wrapper');
    var inn = 0;
    wra.innerText = inn;
    wra.onmousemove = over;

    function over(e){
        wra.innerText = ++inn;
    }

我们通过改变wrapper内的数字来看这个事件的触发情况：

可以看到从左到右移动鼠标触发了这个时间78次。

 

现在我们通过改变代码实现在一秒内只触发一次：

var wra = document.getElementById('wrapper');
    var inn = 0;
    wra.innerText = inn;
    wra.onmousemove = over();

    function over(e){
        var timer;
        return function(){
            clearTimeout(timer);
            timer = setTimeout(function(){
                deal();
            },1000)
        }
    }

    function deal(){
        wra.innerText = ++inn;
    }

现在变成了鼠标移动停止后一秒再执行处理函数。

 

正常情况下我们不可能直接拿到要操作的dom元素，需要再执行函数拿到，如果我们直接再deal里面打印this，得到的会是window，而不是我们要的dom，

所以我们要把触发事件的dom元素保存起来，传给deal

var wra = document.getElementById('wrapper');
    var inn = 0;
    wra.innerText = inn;
    wra.onmousemove = over();

    function over(e){
        var timer;
        return function(){
            var _this = this;
            clearTimeout(timer);
            timer = setTimeout(function(){
                deal.apply(_this);
            },1000)
        }
    }

    function deal(){
        this.style.background = 'white';
        this.style.color = 'black';
        this.innerText = ++inn;
    }

我们把触发事件的this传给deal，并改变了this的背景和文字颜色，当然也可以传参，加在apply（）