VUE前端實現(xiàn)防抖節(jié)流Lodash工具庫舉例詳解
更新時間：2025年01月23日 09:08:56 作者：百事老餅干
這篇文章主要介紹了Lodash庫和自定義防抖、節(jié)流函數(shù)的使用方法,包括它們的定義、應(yīng)用示例及應(yīng)用場景文中通過代碼介紹的非常詳細,需要的朋友可以參考下
方法一：采用Lodash工具庫
Lodash 是一個一致性、模塊化、高性能的 JavaScript 實用工具庫。
（1）采用終端導(dǎo)入Lodash庫
$ npm i -g npm $ npm i --save lodash
（2）應(yīng)用
示例：搜索框輸入防抖
在這個示例中，我們希望用戶在輸入框中停止輸入 500 毫秒后才執(zhí)行搜索操作，避免頻繁請求.
<input type="text" id="search" placeholder="Search...">
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>
// 假設(shè)這是一個執(zhí)行搜索操作的函數(shù)
function performSearch(query) {
console.log('Searching for:', query);
// 這里可以發(fā)送 ajax 請求進行搜索
}
// 使用 lodash 的 debounce 函數(shù)
const debouncedSearch = _.debounce(function(event) {
performSearch(event.target.value);
}, 500); // 500ms 的防抖時間
// 監(jiān)聽輸入框的輸入事件
document.getElementById('search').addEventListener('input', debouncedSearch);
</script>
示例：滾動事件節(jié)流
在這個示例中，我們希望當(dāng)用戶滾動頁面時，每隔 1 秒才記錄一次滾動事件，避免頻繁觸發(fā)回調(diào)函數(shù)。
<div style="height: 2000px;">Scroll down to see the effect</div>
<!-- 導(dǎo)入 throttle 函數(shù)-->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>
// 這是一個處理滾動事件的函數(shù)
function handleScroll() {
console.log('Scroll event detected at:', new Date().toLocaleTimeString());
}
// 使用 lodash 的 throttle 函數(shù)，每隔 1 秒最多觸發(fā)一次
const throttledScroll = _.throttle(handleScroll, 1000);
// 監(jiān)聽滾動事件
window.addEventListener('scroll', throttledScroll);
</script>
- 解釋：
- 當(dāng)用戶滾動頁面時，
throttledScroll函數(shù)會在 1 秒內(nèi)最多觸發(fā)一次，避免滾動時回調(diào)函數(shù)被頻繁調(diào)用。 - 這優(yōu)化了頁面滾動的性能，特別是在回調(diào)函數(shù)較為復(fù)雜時。
- 當(dāng)用戶滾動頁面時，
示例：結(jié)合 leading 和 trailing 選項
假設(shè)我們希望在用戶第一次觸發(fā)事件時立即執(zhí)行函數(shù)，并在停止觸發(fā) 1 秒后再次執(zhí)行。
<input type="text" id="input-field" placeholder="Type something...">
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>
// 假設(shè)這是一個處理輸入的函數(shù)
function handleInput(value) {
console.log('Input value processed:', value);
}
// 使用 debounce 函數(shù)，并配置 leading 和 trailing 選項
const debouncedInput = _.debounce(function(event) {
handleInput(event.target.value);
}, 1000, { leading: true, trailing: true });
// 監(jiān)聽輸入框的輸入事件
document.getElementById('input-field').addEventListener('input', debouncedInput);
</script>
方法二：自定義防抖、節(jié)流函數(shù)
（1）在utils文件夾下創(chuàng)建lodash.ts文件，里面定義防抖節(jié)流函數(shù)
// 防抖函數(shù)
export function debounce(fn: Function, delay: number) {
let timer: ReturnType<typeof setTimeout> | null = null;
return function (this: any, ...args: any[]) {
// 清除上一個定時器
if (timer) {
clearTimeout(timer);
}
// 設(shè)置新的定時器
timer = setTimeout(() => {
fn.apply(this, args); // 使用apply確保this和參數(shù)正確傳遞
}, delay);
};
}
// 節(jié)流函數(shù)
export function throttle(fn: Function, delay: number) {
let lastTime = 0;
return function (this: any, ...args: any[]) {
const now = Date.now();
// 如果距離上次執(zhí)行時間已超過指定時間間隔，則執(zhí)行函數(shù)
if (now - lastTime >= delay) {
lastTime = now; // 更新上次執(zhí)行時間
fn.apply(this, args);
}
};
}（2）應(yīng)用
防抖
- 方式一：
<template>
<div>
<input v-model="searchText" placeholder="輸入搜索內(nèi)容" />
<button @click="handleSubmit">提交</button>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { debounce } from '@/utils/debounce'; // 引入自己寫的防抖函數(shù)
// 1. 聲明響應(yīng)式數(shù)據(jù)
const searchText = ref<string>('');
// 2. 防抖函數(shù)，延遲1000毫秒執(zhí)行提交操作
const submitForm = (val: string) => {
console.log('提交的搜索值:', val);
// 在這里執(zhí)行提交操作
};
// 3. 使用防抖函數(shù)包裝提交操作
const handleSubmit = debounce(() => {
submitForm(searchText.value); // 使用當(dāng)前輸入的值執(zhí)行提交操作
}, 1000); // 防抖延遲設(shè)置為1000毫秒
</script>
- 方式二：
<template>
<div>
<input v-model="searchText" placeholder="輸入搜索內(nèi)容" />
<button @click="submitForm(searchText)">提交</button>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { debounce } from '@/utils/debounce'; // 引入自己寫的防抖函數(shù)
// 1. 聲明響應(yīng)式數(shù)據(jù)
const searchText = ref<string>('');
// 2. 定義提交表單操作
const submitForm = debounce((val: string) => {
console.log('提交的搜索值:', val);
// 在這里執(zhí)行提交操作
}, 1000); // 防抖延遲設(shè)置為1000毫秒
</script>
節(jié)流
<template>
<div @scroll="handleScroll" style="height: 300px; overflow-y: scroll;">
<!-- 模擬內(nèi)容，超出容器高度以啟用滾動 -->
<div style="height: 1000px;">滾動內(nèi)容</div>
</div>
</template>
<script lang="ts" setup>
import { throttle } from './debounce'; // 引入節(jié)流函數(shù)
// 1. 定義滾動事件處理函數(shù)（節(jié)流）
const handleScroll = throttle(() => {
console.log('滾動事件觸發(fā)');
// 在這里處理滾動事件，例如加載更多內(nèi)容
}, 200); // 每200毫秒只執(zhí)行一次
</script>
<template>
<div @scroll="handleScroll" style="height: 300px; overflow-y: scroll;">
<!-- 模擬內(nèi)容，超出容器高度以啟用滾動 -->
<div style="height: 1000px;">滾動內(nèi)容</div>
</div>
</template>
<script lang="ts" setup>
import { throttle } from './debounce'; // 引入節(jié)流函數(shù)
// 1. 定義滾動事件處理函數(shù)（節(jié)流）
const handleScroll = throttle(() => {
console.log('滾動事件觸發(fā)');
// 在這里處理滾動事件，例如加載更多內(nèi)容
}, 200); // 每200毫秒只執(zhí)行一次
</script>
應(yīng)用場景
防抖 (debounce):
手抖了。。。多點了好幾次，一定時間內(nèi)只執(zhí)行一次。（年紀大了手抖）
- 功能：只有在用戶停止觸發(fā)事件一段時間后，才會執(zhí)行回調(diào)函數(shù)。
- 應(yīng)用場景：輸入框搜索、窗口大小調(diào)整（resize）、表單提交等。
節(jié)流 (throttle):
好比點了兩次下拉刷新列表頁面，他不會馬上直接執(zhí)行兩次，是在你定義的一定時間間隔前提前，先執(zhí)行第一次在執(zhí)行第二次
- 功能：在指定的時間間隔內(nèi)，只執(zhí)行一次函數(shù)。如果觸發(fā)頻繁，函數(shù)執(zhí)行會被限制在每個時間間隔內(nèi)最多執(zhí)行一次。
- 應(yīng)用場景：滾動事件、鼠標移動事件、resize 事件等。
附：安裝和引入問題
問題描述： 新手在使用 Vue-lodash 時，可能會遇到安裝和引入的問題。
解決步驟：
確保已經(jīng)正確安裝了 Vue 和 lodash。
使用 npm 或 yarn 安裝 Vue-lodash：
npm install --save vue-lodash lodash
或
yarn add vue-lodash lodash
在你的 Vue 項目中引入 Vue-lodash 和 lodash：
import Vue from 'vue'; import VueLodash from 'vue-lodash'; import lodash from 'lodash';
總結(jié)
到此這篇關(guān)于VUE前端實現(xiàn)防抖節(jié)流Lodash工具庫的文章就介紹到這了,更多相關(guān)VUE前端防抖節(jié)流Lodash內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue3之聲明式和編程式導(dǎo)航,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
在 Vue 3 里使用路由跳轉(zhuǎn)到用戶頁并傳遞路徑參數(shù)時,存在一些限制和需要注意的方面,下面給大家分享vue3中傳遞路徑參數(shù)有什么限制,感興趣的朋友一起看看吧2025-03-03
解決vue單頁路由跳轉(zhuǎn)后scrollTop的問題
今天小編就為大家分享一篇解決vue單頁路由跳轉(zhuǎn)后scrollTop的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
深度解析Vue3狀態(tài)管理中Hook與Store的區(qū)別
在?Vue?3?生態(tài)中,狀態(tài)管理是構(gòu)建可維護應(yīng)用的核心挑戰(zhàn),?本文將深入剖析Hook與Store的本質(zhì)區(qū)別,重點探討?Hook?實現(xiàn)數(shù)據(jù)共享的可行性,并提供實用的選型策略2026-05-05
今天小編就為大家分享一篇vue輸入節(jié)流,避免實時請求接口的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
React和Vue都使用虛擬DOM和diff算法來更新DOM,但它們在實現(xiàn)上有所不同,React采用基于索引的比較,Vue采用雙端比較算法,React在比較時不復(fù)用不同類型的節(jié)點,而Vue會優(yōu)先復(fù)用兩端相同的節(jié)點,React對key的依賴較高,而Vue在沒有key時也能通過雙端比較優(yōu)化2025-03-03
下面小編就為大家分享一篇vue父組件點擊觸發(fā)子組件事件的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue2.0實現(xiàn)列表數(shù)據(jù)增加和刪除
這篇文章主要為大家詳細介紹了vue2.0實現(xiàn)列表數(shù)據(jù)增加和刪除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要給大家介紹了關(guān)于vue3.0公共組件自動導(dǎo)入的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
混入mixin提供了一種非常靈活的方式，來分發(fā)Vue組件中的可復(fù)用功能，一個混入對象可以包含任意組件選項，接下來通過本文給大家介紹VUE?mixin?使用,需要的朋友可以參考下2022-08-08