浅谈js的防抖和节流

如果一个事件触发的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少触发的频率，同时又不影响实际效果。
比如说搜索框的请求优化，搜索的这个需求基本上随处可见，几乎每个项目都会有搜索。
输入搜索词条需要立即触发搜索请求时，防抖和节流可以将多个请求合并为一个请求

现在利用一小例子简单理解一下防抖和节流

首先需要一个盒子

简单写一个绑定鼠标事件 当鼠标移动时让num++

var num=0;
var box=document.querySelector('.box');

//DOM0级事件绑定--pc端
//box.onmousemove=debounce(move,2000)

//DOM2级事件绑定
box.addEventListener('mousemove',debounce(move,2000),false)

function move(e) {
num++;
this.innerHTML=num;

}

防抖

简单来说就是防止抖动
当持续触发事件时，debounce 会合并事件且不会去触发事件，当一定时间内没有触发再这个事件时，才真正去触发事件。
防抖主要利用定时器实现

//用定时器实现防抖
function debounce(func,wait) {
var timer=null;
return function() {
//保存当前调用的dom对象
var _this=this;
//保存事件对象
var args=arguments;
clearTimeout(timer)
timer=setTimeout(function() {
func.apply(_this,args)
},wait)
}
}

节流

hrottle（节流），当持续触发事件时，保证隔间时间触发一次事件。
持续触发事件时，throttle 会合并一定时间内的事件，并在该时间结束时真正去触发一次事件。
防抖主要有两种方式实现

第一种：时间戳

//时间戳版本实现节流
function throttle(func,wait) {
    //定义初始时间
    var oldTime=0;
    return function() {
        var _this=this;
        var args=arguments;

        //当前时间戳
        var newTime=+new Date();

        //判断用当前时间减去旧的时间，如果大于wait指定的时间就会触发
        if(newTime-oldTime>wait) {
            //执行触发的函数
            func.apply(_this,args)
            //将旧时间更新
            oldTime=newTime;
        }

    }

第二种：定时器

//时间戳版本实现节流
function throttle(func,wait) {
    var timer=null;
    return function() {
        var _this=this;
        var args=arguments;
       if(!timer) {
            timer=setTimeout(function() {
                timer=null;
                func.apply(_this,args)
            },wait)
       }
    }
}