一贱田、概念
減緩事件處理程序的執(zhí)行速度 & 次數(shù)缅茉。這種緩沖技術(shù)就是防抖和節(jié)流。
二男摧、場景
監(jiān)聽頻繁觸發(fā)的事件蔬墩，比如：用戶在輸入框打字、窗口大小的調(diào)整耗拓、滾動等事件拇颅。
三、實現(xiàn)
防抖：待用戶停止操作n秒后乔询，再執(zhí)行事件樟插。
應(yīng)用場景：scroll滾動事件觸發(fā)、搜索框輸入查詢竿刁、表單驗證黄锤、按鈕提交事件、瀏覽器窗口縮放食拜，resize事件
debounce (fn, delay) { //fn為需要防抖的函數(shù)鸵熟，delay為防抖期限值
? ? let timer = null;
? ? return () => {
? ? ? ? if(timer){ //當前正在計時周期中，并且再次觸發(fā)了事件负甸，取消當前計時流强，重新計時
? ? ? ? ? ? ? clearTimeout(timer);
? ? ? ? }
? ? ? ? timer = setTimeout (fn,delay); //開始計時
? ? }
}
配合使用示例：監(jiān)聽滾動事件
showTop(){
? ? let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
? ? console.log("當前位置",scrollTop);
}
mouted(){
? ? window.addEventListener("scroll",this.debounce(this.showTop,1000),true); //第三個參數(shù)要設(shè)置為true
}
節(jié)流：如果用戶持續(xù)操作，每隔n秒呻待，執(zhí)行一次事件煮盼。
應(yīng)用場景：DOM元素的拖拽功能實現(xiàn)、射擊游戲類带污、計算鼠標移動的距離僵控、監(jiān)聽scroll事件
throttle(fn,delay){
? ? let timer = null;
? ? return () => {
? ? ? ? if(!timer){
? ? ? ? ? ? timer = setTimeout(() => {
? ? ? ? ? ? ? ? fn();
? ? ? ? ? ? ? ? timer = null;
? ? ? ? ? ? },delay);? //切記timer=null不能寫在setTimeout外面
? ? ? ? }
? ? }
}
//方法二：時間戳
throttle(fn,delay){
? ? let start = null;
? ? return () => {
? ? ? ? let now = Date.now();
? ? ? ? if(!start){
? ? ? ? ? ? start = now;
? ? ? ? }
? ? ? ? if (now - start >= delay) {
? ? ? ? ? ? fn();
? ? ? ? ? ? start = null;
? ? ? ? }
? ? }
}
四、vue中使用防抖和節(jié)流
觀察者防抖
watch:{...}
事件處理器防抖
methods: {...}
