溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在一個電影項目中，我想在電影的列表中，保存下拉的當前位置，防止你切換頁面后，再切換回當前的電影列表頁，他就又回到電影的第一條數據。
這時候，我不想每次只要滑動一點，就保存當前位置，我想隔一段時間，保存一次，這時候，就可以使用防抖和節流。
概念
說白了， 防抖節流就是使用定時器 來實現我們的目的。
防抖(debounce)：
在事件被觸發n秒后再執行回調，如果在這n秒內又被觸發，則重新計時。
典型的案例就是輸入框搜索：輸入結束后n秒才進行搜索請求，n秒內又輸入的內容，則重新計時。
節流(throttle)：
規定在一個單位時間內，只能觸發一次函數，如果這個單位時間內觸發多次函數，只有一次生效。
典型的案例就是鼠標不斷點擊觸發，規定在n秒內多次點擊只生效一次。
用法
防抖(debounce)
下拉列表，隔一段時間保存當前下拉位置。
我們可以在 mounted 鉤子中實現我們的防抖：
// 防抖 定時器
let timer;
//list就是電影列表 ref="list" $el獲取DOM元素
this.$refs.list.$el.addEventListener("scroll", e => {
console.log("---->",e.target.scrollTop) //不使用防抖
if (timer) {
//清空timer
clearTimeout(timer);
}
timer = setTimeout(() => {
console.log(e.target.scrollTop) //使用防抖
//在sessionStorage中保存當前下拉位置
// sessionStorage.setItem("position", e.target.scrollTop);
}, 75); //75mm為最佳
});
效果演示(隔一段時間保存當前位置)：
加 ----> 為不使用防抖，沒加的則使用防抖
輸入框搜索隔段時間進行搜索請求：
<template>
<div>
<input type="text" @keyup="debounce" />
</div>
</template>
<script>
//定義 timer
let timer;
export default {
methods: {
debounce: function() {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
console.log("防抖...");
timer = undefined;
}, 2000);
}
}
};
</script>
節流(throttle)
在n秒內點擊多次，只有一次生效。
<template>
<div>
<button @click="throttle">按鈕</button>
</div>
</template>
<script>
//定義
let timer, lastTime;
export default {
methods: {
throttle: function() {
let now = +new Date();
if (lastTime && lastTime - now < 200) { //在200ms內點擊多次，只有一次生效
clearTimeout(timer);
}
timer = setTimeout(() => {
console.log("點擊...");
lastTime = +new Date();
}, 200);
}
}
};
</script>
效果演示：
補充
當然，也可以對這兩個方法進行封裝，以便在多處使用。
/**
* 函數防抖 (只執行最后一次點擊)
*/
export const Debounce = (fn, t) => {
let delay = t || 500;
let timer;
console.log(fn)
console.log(typeof fn)
return function () {
let args = arguments;
if(timer){
clearTimeout(timer);
}
timer = setTimeout(() => {
timer = null;
fn.apply(this, args);
}, delay);
}
};
/*
* 函數節流
*/
export const Throttle = (fn, t) => {
let last;
let timer;
let interval = t || 500;
return function () {
let args = arguments;
let now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(() => {
last = now;
fn.apply(this, args);
}, interval);
} else {
last = now;
fn.apply(this, args);
}
}
};
總結
以上所述是小編給大家介紹的Vue 防抖與節流的使用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
