闭包的使用-高频事件优化

函数节流

函数节流的概念
当一个函数或者事件触发频率高，将其触发频率降低
核心思想：在连续触发的事件中，一定的时间内只执行一次我们的函数。

// 函数节流 核心思路 一定时间内 只执行一次代码
// 想要让2次执行中间 有一个时间间隔
// 纪录上一次的执行时间
// 获得当前时间
// 1秒执行一次 
// 当前时间-上次执行的时间 > 1000ms

function fn(callback,wait){//传入回调函数和延迟时间
    var prev = 0 ;//闭包调用的变量;
    return function(){
        var now =Date.now();//获取当前时间戳
        var arg =arguments; //获取事件传参
        if(now-prev>wait){
            callback.apply(this,arg)//执行callback
            prev=now ;//记录当前时间
        }
    }
}
var box =document.querySelector('.box');
box.addEventListener('mousemove',fn(funtion(){
    //你所要节流的 函数
    console.log('触发');//例子
),1000)

函数防抖

函数防抖的概念

类似于坐电梯，当所有人进来的时候他才会执行，如果期间不断的有人进电梯那么电梯将不会运行

核心思路：是指触发时间后再n秒内只能执行一次，如果再n秒内又触发了该事件，则从新计算时间

 function fn(callback,wait){
     var timer=null; //定义定时器 闭包变量
     return function(){
         var args =arguments;
         if(timer) clearTimeout(timer);
         timer =setTimeout(function(){
             callback.apply(this,arg);
         }.bind(this),wait)//定时器this指向window 重新指向引用对象 wait是传入时间
     }
 }
 
var search = document.querySelector('#search');

search.addEventListener('keyup',fn(function(){
    	var url =`https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1441,21107,18560,29568,29221,28703&wd=${this.value}&cb=cb`;
    	//jsonp方式请求百度接口
        var script=document.createElement('script');
        script.src=url;
        document.body.appendChild(script);
        document.body.removeChild(script);
},1000))

function cb(data) {
    console.log(data);
}