Vue最新防抖方案(必看篇)
函數(shù)防抖（debounce）：當(dāng)持續(xù)觸發(fā)事件時(shí)，一定時(shí)間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會(huì)執(zhí)行一次，如果設(shè)定的時(shí)間到來之前，又一次觸發(fā)了事件，就重新開始延時(shí)。舉個(gè)栗子，持續(xù)觸發(fā)scroll事件時(shí)，并不執(zhí)行handle函數(shù)，當(dāng)1000毫秒內(nèi)沒有觸發(fā)scroll事件時(shí)，才會(huì)延時(shí)觸發(fā)scroll事件。
函數(shù)節(jié)流（throttle）：當(dāng)持續(xù)觸發(fā)事件時(shí)，保證一定時(shí)間段內(nèi)只調(diào)用一次事件處理函數(shù)。節(jié)流通俗解釋就比如我們水龍頭放水，閥門一打開，水嘩嘩的往下流，秉著勤儉節(jié)約的優(yōu)良傳統(tǒng)美德，我們要把水龍頭關(guān)小點(diǎn)，最好是如我們心意按照一定規(guī)律在某個(gè)時(shí)間間隔內(nèi)一滴一滴的往下滴。舉個(gè)栗子，持續(xù)觸發(fā)scroll事件時(shí)，并不立即執(zhí)行handle函數(shù)，每隔1000毫秒才會(huì)執(zhí)行一次handle函數(shù)。
防抖實(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é)流實(shí)例：
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)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue組件代碼分塊和懶加載講解，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
打包壓縮成zip的東西,再解壓,很麻煩,本文主要介紹了vue中預(yù)覽zip的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
詳解vue-cli+element-ui樹形表格(多級表格折騰小計(jì))
這篇文章主要介紹了vue-cli + element-ui 樹形表格（多級表格折騰小計(jì)），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
詳解在vue-cli中使用graphql即vue-apollo的用法
這篇文章主要介紹了詳解在vue-cli中使用graphql即vue-apollo的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
Vue使用v-model封裝el-pagination組件的全過程
通過封裝el-pagination組件開發(fā)自定義分頁組件的類似文章網(wǎng)上已經(jīng)有很多了，但看了一圈，總是不如意，于是決定還是自己動(dòng)手搞一個(gè)，對v-model封裝el-pagination組件相關(guān)知識感興趣的朋友一起看看吧2021-07-07
這篇文章主要介紹了Vue組件化的基本概念,包括什么是組件化、Vue的組件化思想以及如何在Vue中注冊和使用組件,文章還詳細(xì)講解了如何進(jìn)行父子組件之間的通信,包括父組件傳遞數(shù)據(jù)給子組件和子組件通過自定義事件將數(shù)據(jù)傳遞給父組件,文章最后通過一個(gè)綜合練習(xí)來鞏固所學(xué)知識2025-02-02
Vue中的v-model綁定修飾符的實(shí)現(xiàn)原理
v-model 是Vue.js中的一個(gè)重要指令,通過它我們可以輕松實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,本文介紹一些常用的 v-model 綁定修飾符,并解析它們的實(shí)現(xiàn)原理,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了Vue入口文件index.html緩存的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
在Vue項(xiàng)目中使用d3.js的實(shí)例代碼
這篇文章主要介紹了在Vue項(xiàng)目中使用d3.js的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值價(jià)值,需要的朋友可以參考下2018-05-05
Vue + Webpack + Vue-loader學(xué)習(xí)教程之功能介紹篇
這篇文章主要介紹了關(guān)于Vue + Webpack + Vue-loader功能介紹的相關(guān)資料，文中介紹的非常詳細(xì)，相信對大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03