亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

VUE前端實現(xiàn)防抖節(jié)流Lodash工具庫舉例詳解

 更新時間：2025年01月23日 09:08:56   作者：百事老餅干  
這篇文章主要介紹了Lodash庫和自定義防抖、節(jié)流函數(shù)的使用方法,包括它們的定義、應(yīng)用示例及應(yīng)用場景文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

方法一：采用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ù)雜時。

示例：結(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í)行一次。（年紀(jì)大了手抖）

  • 功能：只有在用戶停止觸發(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)用場景：滾動事件、鼠標(biāo)移動事件、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)文章

  • vue router 傳參獲取不到的解決方式

    vue router 傳參獲取不到的解決方式

    今天小編就為大家分享一篇vue router 傳參獲取不到的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vue中watch和methods兩種屬性的作用

    Vue中watch和methods兩種屬性的作用

    這篇文章主要介紹了Vue中watch和methods兩種屬性的作用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2023-02-02
  • 淺談 Vue 項目優(yōu)化的方法

    淺談 Vue 項目優(yōu)化的方法

    這篇文章主要介紹了淺談 Vue 項目優(yōu)化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • vue-upload上傳圖片詳細(xì)使用方法

    vue-upload上傳圖片詳細(xì)使用方法

    這篇文章主要介紹了使用vue-upload上傳圖片的詳細(xì)使用說明，文中有相關(guān)的代碼示例供大家參考，感興趣的小伙伴一起跟著小編來學(xué)習(xí)吧
    2023-05-05
  • Vue?中如何使用?el-date-picker?限制只能選擇當(dāng)天、當(dāng)天之前或當(dāng)天之后日期的方法詳解

    Vue?中如何使用?el-date-picker?限制只能選擇當(dāng)天、當(dāng)天之前或當(dāng)天之后日期的方法詳解

    在Vue前端開發(fā)中，使用 el-date-picker 組件進行日期選擇是常見的需求，有時候我們需要限制用戶只能選擇當(dāng)天、當(dāng)天之前或當(dāng)天之后的日期，本文將詳細(xì)介紹如何使用 el-date-picker 組件實現(xiàn)這些限制，讓你能夠輕松應(yīng)對各種日期選擇場景,需要的朋友可以參考下
    2023-09-09
  • 快速解決vue-cli在ie9+中無效的問題

    快速解決vue-cli在ie9+中無效的問題

    今天小編就為大家分享一篇快速解決vue-cli在ie9+中無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue Antd 輸入框Input自動聚焦方式

    vue Antd 輸入框Input自動聚焦方式

    這篇文章主要介紹了vue Antd 輸入框Input自動聚焦方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-04-04
  • el-input輸入校驗不能為空格以及不能輸入全部為空的內(nèi)容

    el-input輸入校驗不能為空格以及不能輸入全部為空的內(nèi)容

    這篇文章主要給大家介紹了關(guān)于el-input輸入校驗不能為空格以及不能輸入全部為空的內(nèi)容的相關(guān)資料,el-input驗證規(guī)則主要是為了確保輸入的內(nèi)容符合特定的要求,需要的朋友可以參考下
    2023-10-10
  • vue-cli的工程模板與構(gòu)建工具詳解

    vue-cli的工程模板與構(gòu)建工具詳解

    vue-cli提供的腳手架只是一個最基礎(chǔ)的，也可以說是Vue團隊認(rèn)為的工程結(jié)構(gòu)的一種最佳實踐。這篇文章主要介紹了vue-cli的工程模板與構(gòu)建工具 ,需要的朋友可以參考下
    2018-09-09
  • vue綁定的點擊事件阻止冒泡的實例

    vue綁定的點擊事件阻止冒泡的實例

    下面小編就為大家分享一篇vue綁定的點擊事件阻止冒泡的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02

最新評論