JS 防抖和节流

用户在浏览网页时 进行搜索，点击等功能，

如百度的的搜索 会事实根据用户搜索的内容，进行内容识别推荐，

或 一直点击按钮 ，会一直发送请求。正常情况下，会有大量资源占用。

防抖与节流本质意义上就是减少请求 或触发某一事件的次数，从而达到减少资源占用的情况

防抖：

举例：点击 按钮触发打印 console.log(’点击x次‘)

正常情况下 ，点击十次就会触发十次

使用防抖时 ：设置时间为一秒 当这次事件触发后 ，如果一秒内再次点击，那么一秒就会重新，计时，

当一秒时间完后 再次点击才会触发 无论是立即执行，还是 最后执行 为一个道理

代码： es5 写法

function my_fangdou(callback,wait,immediate){//三个参数 1，回调函数 2，等待时间， 3，判断是否立即执行callback函数  实参传 true 或 false
    var time 
    return function(){
        var that = this //定时器中this指向 window 所以要在这里将this存起来
        var arg = arguments
        clearTimeout( time ) //每一次执行都清除上一次的定时器  
        if(immediate){  //如果传为true 就立即执行函数
            var callnow =! time 获取time的值取反的话 callnow值为true 
            time = setTimeout(function(){
            time = null 
            },wait)  //当wait 时间过后 则将time=null  如果时间没到时再次执行 函数则上面的clear会清除定时器，定时器重新计时，那回调函数就不会触发
            if( callnow ){  //如果callnow为true则执行
                callback.apply(that, arg)
            }
        } else {
            time = setTimeout( function(){
            callback.apply(that,arg)
            },wait)
        }    
    }

}

代码：es6 写法

function my_fangdou(callback,wait,immeated){
    var time
    return () => {
        var that = this
        var arg = arguments
        clearTimeout( time )
        if(immeated){
            var callnow = !time
            time = setTimeout(() => {time = null },wait)
            if( callnow ){
                callback.apply(that,arg)
                }
            } else {
            time = setTimeout(() => { callback.apply(that,arg)},wait)
            }
        }
    }

①基本防抖功能

只会实现 ：例如点击事件 点击一次 如果一秒内不再点击 事件触发 的效果

function my_fangdou(callback,wait){
    var time  //此时time 定义的是 定时器的名称  
    return function(){
        var that = this // 此时 this 谁调用 指向谁
        var arg = argumrnts
        clearTimeout(time) //每次执行的时候都要清理定时器 如果不清理定时器的话 并不会实现 限制触发次数的功能 ，只会在wait时间 过后触发
         time = setTimeout(() => {
            callback.apply(that,arg) // 在定时器中this指向 是window  要改变指向的话要使用之前存的that
            },wait)
        }
    }

let num=0
fn => { //这里面存的是点击事件要执行的事件
    num++
    }
var btn = document.querySelector('div') //获取div
btn.onclick = my_fangdou(fn,1000)  //点击事件调用防抖

节流

节流是 在执行时间内只触发多少次

例如：点击按钮打印 设置时间为一秒 无论点击多少次，事件只会每一秒触发一次

①利用时间 实现节流

立即触发事件

function my_jieliu(callback,wait){
    var time,
         now,
         that,
         old = 0
    return function(){
            now = new Data().getTime() //获取当前点击时的时间
            arg = arguments
            that = this
        if(now - old > wait){  //第一次是old = 0 无论如何都会触发 
            callback.apply(that,arg)
            old = now     //进入if判断后  要将old 赋值为 now  这里的old = now，可以理解为 上次点击时候的时间
        }
    }
}

②利用定时器来实现节流

最后执行事件

设置事件为一秒 无论点击多少次 事件都会在一秒后执行一次

function my_jieliu(callback,wait){
    var time
        arg,
        that
     return function(){
        that = this
        arg = arguments
        if(!time){ //取反 time  当 time = null 时 为true 则会进入if
            setTimeout(function(){
            callback.apply(that,arg)    
            time = null //当 wait时间过后 time = null 后才会可以进入 上面的if中 以达到节流的效果
            },wait) 
            }
        }
    }

③ 时间戳与定时器结合

立即触发，与最后出发结合

function my_jieliu(callback,wait){
    var time,    
        now,
        that,
        arg,
        old = 0
    return function(){
        that = this
        arg = arguments
        now = new Data().getTime()
        if(now - old = wait){
            if(!time){
                clearTimeout(time)
                time = null
            }
            callback.apply(that,arg)
            old = now
        }else if(!time){
            time= setTimeout(function(){
            callback.apply(that,arg)
            old = new Data().getTime()
            },wait)
        }
    }
}