JS中防抖与节流的运用

什么是防抖事件

概念：

在事件被触发n秒后再执行回调函数。若在这n秒内又被触发，则重新计时。
典型的案例：【输入搜索】：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。

---

什么是节流事件

概念：

规定在一个单位时间内，只能触发一次函数。若这个单位时间内触发多次函数，只有一次生效。
典型的案例：鼠标不断点击触发，规定在n秒内多次点击只有一次生效。

代码实现：

防抖: 设置一个定时器，通过闭包，抓住定时器变量，控制定时器的添加和清除
节流: 通过一个布尔变量作为状态，判断代码是否需要执行

第一步:在utils工具文件夹下建一个utils.js文件

//防抖
/**
 * @description: 在vue中使用的防抖函数
 * @param {Sting} fn 传入的函数
 * @param {Number} time 延迟的时间
 * @returns 处理后的执行函数
 */
export function _debounce(fn, time=200) {
    let t = null;
    return function() {
        let _self = this,
            args = arguments;
        if (t) {
            clearTimeout(t);
        }
        t = setTimeout(() => {
            fn.apply(_self, args);
        }, time);
    };
}

//节流
/**
 * 
 * @param {String} fn 函数
 * @param {Number} delay 延迟的时间
 */
export function _throttle(fn, delay=200) {
    let t = null,
        begin = new Date().getTime();

    return function() {
        let _self = this,
            args = arguments,
            cur = new Date().getTime();

        clearTimeout(t);
        if (cur - begin >= delay) {
            fn.apply(_self, args);
            begin = cur;
        } else {
            t = setTimeout(() => {
                fn.apply(_self, args);
            }, delay)
        }
    }

}

第二步：在vue组件中使用

防抖：vue代码

<template>
	<input v-model="name" @change='handleChange' />
</template>

import {_debounce} from '@/utils/utils';
<script>
export default {
	methods: {
	  handleChange:_debounce(function(value){
	   this.requestGetInfo(value)
	   },1000),	   
	   //搜索框需要执行的事件:根据搜索框数据在某个接口里获取数据
		requestGetInfo(value){
			console.log(value);
			.....
		}
	}
};
</script>

节流: vue代码

<template>
	<button @click='handleSubmit' />
</template>
import { _throttle} from '@/utils/utils';
<script>
export default {
	methods: {
	  handleSubmit:_throttle(function(){
	   this.requestPostInfo()
	   },1000),
	   
	//需要执行的事件:按钮提交数据
		requestPostInfo(){
			.....
		}
	}
};
</script>

🎯注意：

1. 防抖/节流函数作为触发事件对象的value(值)，而不是在触发事件的函数体内执行；
2. 若想使用this关键字访问到Vue实例,那么防抖/节流回调函数必须使用function关键字声明,不能使用箭头函数(因为箭头函数的this是由创建函数的上下文决定的 ), 若使用箭头函数this是undefined。