Vue最新防抖方案(必看篇)
函數(shù)防抖（debounce）：當(dāng)持續(xù)觸發(fā)事件時，一定時間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會執(zhí)行一次，如果設(shè)定的時間到來之前，又一次觸發(fā)了事件，就重新開始延時。舉個栗子，持續(xù)觸發(fā)scroll事件時，并不執(zhí)行handle函數(shù)，當(dāng)1000毫秒內(nèi)沒有觸發(fā)scroll事件時，才會延時觸發(fā)scroll事件。
函數(shù)節(jié)流（throttle）：當(dāng)持續(xù)觸發(fā)事件時，保證一定時間段內(nèi)只調(diào)用一次事件處理函數(shù)。節(jié)流通俗解釋就比如我們水龍頭放水，閥門一打開，水嘩嘩的往下流，秉著勤儉節(jié)約的優(yōu)良傳統(tǒng)美德，我們要把水龍頭關(guān)小點，最好是如我們心意按照一定規(guī)律在某個時間間隔內(nèi)一滴一滴的往下滴。舉個栗子，持續(xù)觸發(fā)scroll事件時，并不立即執(zhí)行handle函數(shù)，每隔1000毫秒才會執(zhí)行一次handle函數(shù)。
防抖實例：
<script>
const delay = (function () {
let timer = 0
return function (callback, ms) {
clearTimeout(timer)
timer = setTimeout(callback, ms)
}
})()
export default {
methods：{
fn() {
delay(() => {
//執(zhí)行部分
}, 500)
}
}
}
</script>
節(jié)流實例：
var throttle = function(func, delay) {
var timer = null;
return function() {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function() {
func.apply(context, args);
timer = null;
}, delay);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
以上這篇Vue最新防抖方案(必看篇)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue3 源碼解讀之 time slicing的使用方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue中的<template>標(biāo)簽與react中的<></>標(biāo)簽區(qū)別詳解
這篇文章主要為大家介紹了vue中的<template>標(biāo)簽與react中的<></>標(biāo)簽區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要介紹了vue開發(fā)中關(guān)于axios的封裝過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
element-ui中導(dǎo)航組件menu的一個屬性:default-active說明
這篇文章主要介紹了element-ui中導(dǎo)航組件menu的一個屬性:default-active說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
默認(rèn)情況下，寫在.vue組件中的樣式會全局生效，因此很容易造成多個組件之間的樣式?jīng)_突問題。導(dǎo)致組件之間樣式?jīng)_突的根本原因，我們接下來探究一下2022-11-11
這篇文章主要介紹了vue element-ui讀取pdf文件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
Vue Getters和mapGetters的原理及使用示例詳解
Vuex的核心概念包括state、mutations、actions、getters和modules,今天,我們要深入探討其中一個關(guān)鍵部分：getters,以及它的相關(guān)輔助函數(shù)mapGetters,感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要介紹了如何解決公共組件父子組件依賴調(diào)用和子組件校驗父組件條件的問題，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
vue.js學(xué)習(xí)之vue-cli定制腳手架詳解
這篇文章主要給大家介紹了vue.js學(xué)習(xí)之vue-cli定制腳手架的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
Vue3 封裝 element-plus 圖標(biāo)選擇器實現(xiàn)步驟
這篇文章主要介紹了Vue3 封裝 element-plus 圖標(biāo)選擇器,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09