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