节流和防抖的应用 vue

1 防抖：
（1）定义：
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索（连续输入时避免多次请求接口）：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。

（2）实现原理：
函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，知道函数请求停止并超过时间间隔才会执行。

export const debounce =(method,delay) => {
    let timer = null;
    return function () {
        let self = this,
            args = arguments;
        timer && clearTimeout(timer);
        timer = setTimeout(function () {
            method.apply(self,args);
        },delay);
    }
};

2.节流：
（1）定义：
规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效； 典型的案例就是鼠标不断点击触发，（还有resize、scroll、mousemove等事件触发监听）规定在n秒内多次点击只有一次生效。

（2）实现原理：
其原理是用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段，如果是，则执行，并更新上次执行的时间戳，

export const throttle = (fn, delay, mustRunDelay) => {
    let timer = null
    let t_start
    return function() {
        const context = this
        const args = arguments
        let t_curr = +new Date()

        clearTimeout(timer)
        if (!t_start) {
            t_start = t_curr
        }
        if (t_curr - t_start >= mustRunDelay) {
            fn.apply(context, args)
            t_start = t_curr
        } else {
            timer = setTimeout(function() {
                fn.apply(context, args)
            }, delay)
        }
    }
};

应用：举例说明

// 比如鼠标移入事件正常触发的是changeStatus 这个函数，那么就在这个函数上给他加个节流，防抖同理
changeStatus :throttle(function(xx,yy)) {
	// setStatus这个函数是处理触发的changeStatus 这个函数的逻辑函数，xx,yy 可以是传过来的参数
	this.setStatus(xx,yy)
},2000)