Vue 防抖与节流

节流：

        函数的节流就是预定一个函数只有在大于等于执行周期时才会执行，周期内调用不会执行。好像一滴水只有积攒到一定重量才会落下一样。

     我们想要的是在规定时间内只能执行一次，比如1秒内只能执行一次.无论你点击多少次

<button id='show'>抢购</button>

<div id="box">0</div>

// 点击调用节流函数
show.onclick = throttle(qianggou, 1000)
//节流函数 wait:规定在一秒钟内只能执行一次
function throttle (callback, wait) {
        //定义时间为0
        let lastTime = 0;
        //返回函数 否则调用将是undefined
        return function () {
            //定义当前时间
            let nowTime = new Date().getTime()
            //判断当前时间减去0是否大于 自定义时间
            if (nowTime - lastTime > wait) {
                /调用函数
                callback();   //也可调用时改变this指向
                //保存上次点击的时间
                lastTime = nowTime;
            }
        }
    }
    //数量加一
    function qianggou(){
        box.innerText = parseInt(box.innerText)+1
    }

防抖：

                函数防抖就是函数需要频繁触发情况时，只有足够空闲的时候，才会执行一次。好像公交司机会等人都上车后才会开车一样

        在搜索的时候，并不是每输入一个字符，都会想服务器请求一次，而是在输入完成后发出一次请求。

        用户无论输入多快，都会发出请求，从而去加载服务器资源，对性能有很大的影响.

<input type="text" id="ipt" />

function debounce (callback, wait) { //callback ：函数 wait ： 时间
        //定时器名称
        let timer = null;
        //跟节流同理 返回函数 否则调用将是undefined
        return function () {
            //获取input的this
            let that= this
            //调用时清除
            clearTimeout(timer);
            //开启定时器
            timer = setTimeout(function () {
               //调用传入函数
                callback.call(that);　　//this绑定
            },wait)
        }
    }
    //当前input值
    function ajax () {
        console.log(this.value)
    }
    //输入时触发
    ipt.oninput = debounce(ajax, 1000)  //1s后发出请求

call()、apply()、bind() 都是用来重定义 this 这个对象的！ bind 返回的是一个新的函数，你必须调用它才会被执行。

bind 有返回值 并且返回值是一个函数

call apply 没有返回

call 有多个参数 第一个参数 this的指向 后面的参数就是要传递的参数

applu 有两个参数 第一个参数 this的指向  后参数的数组

bind 的参数个call一样

obj.myFun.call(db,'成都','上海')；　　　　 // 德玛 年龄 99  来自 成都去往上海
obj.myFun.apply(db,['成都','上海']);      // 德玛 年龄 99  来自 成都去往上海  
obj.myFun.bind(db,'成都','上海')();       // 德玛 年龄 99  来自 成都去往上海
obj.myFun.bind(db,['成都','上海'])();　　 // 德玛 年龄 99  来自 成都, 上海去往 undefined

微妙的差距！

从上面四个结果不难看出:

call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：

call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,'成都', ... ,'string' )。

apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,['成都', ..., 'string' ])。

bind 除了返回是函数以外，它 的参数和 call 一样。

当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数 、 object 等等！

函数节流与函数防抖

throttle-函数节流：一个水龙头在滴水，可能一次性会滴很多滴，但我们只希望它每隔500ms滴一滴水，保持这个频率，即我们希望函数在以一个可以接受的频率重复操作

debounce-函数防抖：将一个弹簧按下，继续加压，继续按下，只会在最后放手的一瞬反弹。即我们希望函数只会调用一次，即使在这之前反复调用它，最终也只是会调用一次而已