js工具库（一）封装一个节流和防抖函数

关于节流和防抖&＃xff1f;

节流
节流的意思是&＃xff0c;规定时间内&＃xff0c;只触发一次。比如我们设定500ms&＃xff0c;在这个时间内&＃xff0c;无论点击按钮多少次&＃xff0c;它都只会触发一次。具体场景可以是抢购时候&＃xff0c;由于有无数人 快速点击按钮&＃xff0c;如果每次点击都发送请求&＃xff0c;就会给服务器造成巨大的压力&＃xff0c;但是我们进行节流后&＃xff0c;就会大大减少请求的次数。

let timer, flag;
/*** 节流原理&＃xff1a;在一定时间内&＃xff0c;只能触发一次* * &＃64;param {Function} func 要执行的回调函数 * &＃64;param {Number} wait 延时的时间* &＃64;param {Boolean} immediate 是否立即执行* &＃64;return null*/
function throttle(func, wait &＃61; 500, immediate &＃61; true) {if (immediate) {if (!flag) {flag &＃61; true;// 如果是立即执行&＃xff0c;则在wait毫秒内开始时执行typeof func &＃61;&＃61;&＃61; &＃39;function&＃39; && func();timer &＃61; setTimeout(() &＃61;> {flag &＃61; false;}, wait);}} else {if (!flag) {flag &＃61; true// 如果是非立即执行&＃xff0c;则在wait毫秒内的结束处执行timer &＃61; setTimeout(() &＃61;> {flag &＃61; falsetypeof func &＃61;&＃61;&＃61; &＃39;function&＃39; && func();}, wait);}}
};
export default throttle

在vue.js使用场景


<template><div><div &＃64;click&＃61;"onClickDeom">点击事件</div></div>
</template><script>
import throttle from &＃39;&＃64;/utils/throttle.js&＃39;export default {methods: {onClickDeom() {// 六秒内只执行一次throttle (this.deomFun,6000)},deomFun(){console.log(&＃39;123&＃39;)},}}
</script>


防抖
防抖的意思是&＃xff0c;在连续的操作中&＃xff0c;无论进行了多长时间&＃xff0c;只有某一次的操作后在指定的时间内没有再操作&＃xff0c;这一次才被判定有效。具体场景可以搜索框输入关键字过程中实时 请求服务器匹配搜索结果&＃xff0c;如果不进行处理&＃xff0c;那么就是输入框内容一直变化&＃xff0c;导致一直发送请求。如果进行防抖处理&＃xff0c;结果就是当我们输入内容完成后&＃xff0c;一定时间(比如500ms)没有再 输入内容&＃xff0c;这时再触发请求。

let timeout &＃61; null;/*** 防抖原理&＃xff1a;一定时间内&＃xff0c;只有最后一次操作&＃xff0c;再过wait毫秒后才执行函数* * &＃64;param {Function} func 要执行的回调函数 * &＃64;param {Number} wait 延时的时间* &＃64;param {Boolean} immediate 是否立即执行 * &＃64;return null*/
function debounce(func, wait &＃61; 500, immediate &＃61; false) {// 清除定时器if (timeout !&＃61;&＃61; null) clearTimeout(timeout);// 立即执行&＃xff0c;此类情况一般用不到if (immediate) {var callNow &＃61; !timeout;timeout &＃61; setTimeout(function() {timeout &＃61; null;}, wait);if (callNow) typeof func &＃61;&＃61;&＃61; &＃39;function&＃39; && func();} else {// 设置定时器&＃xff0c;当最后一次操作后&＃xff0c;timeout不会再被清除&＃xff0c;所以在延时wait毫秒后执行func回调方法timeout &＃61; setTimeout(function() {typeof func &＃61;&＃61;&＃61; &＃39;function&＃39; && func();}, wait);}
}export default debounce

在vue.js使用场景


<template><div><div &＃64;click&＃61;"onClickDeom">点击事件</div></div>
</template><script>
import throttle from &＃39;&＃64;/utils/debounce.js&＃39;export default {methods: {onClickDeom() {// 六秒内只执行一次debounce(this.deomFun,6000)},deomFun(){console.log(&＃39;123&＃39;)},}}
</script>