vue中如何使用防抖和節流

本篇文章給大家分享的是有關vue中如何使用防抖和節流，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

概念

說白了， 防抖節流就是使用定時器 來實現我們的目的。

防抖(debounce)：

在事件被觸發n秒后再執行回調，如果在這n秒內又被觸發，則重新計時。

典型的案例就是輸入框搜索：輸入結束后n秒才進行搜索請求，n秒內又輸入的內容，則重新計時。

節流(throttle)：

規定在一個單位時間內，只能觸發一次函數，如果這個單位時間內觸發多次函數，只有一次生效。

典型的案例就是鼠標不斷點擊觸發，規定在n秒內多次點擊只生效一次。

防抖

定義

頻繁操作防止抖動，在操作后 n 秒內不操作，才觸發事件，若繼續操作，則重新計時

使用場景

• 輸入框輸入

• 縮放resize

代碼

// utils.js
// immediate 是否開始立即執行
function debounce(func, delay = 300, immediate = false) {
    let timer = null
    return function() {
        if (timer) {
            clearTimeout(timer)
        }
        if (immediate && !timer) {
            func.apply(this, arguments)
        }
        timer = setTimeout(() => {
         func.apply(this, arguments)
        }, delay)
    }
}

在vue中使用

方法一：寫在公共方法utils里引入

import { debounce } from 'utils'
methods: {
    appSearch:debounce(function(e.target.value){
        this.handleSearch(value)
    }, 1000),
    handleSearch(value) {
        console.log(value)
    }
}

方法二：寫在當前vue文件中

data: () => {
  return {
    debounceInput: () => {}
  }
},
methods: {
  showApp(value) {
    console.log('value', value)
  },
  debounce(func, delay = 300, immediate = false) {
    let timer = null
    return function() {
        if (timer) {
            clearTimeout(timer)
        }
        if (immediate && !timer) {
            func.apply(this, arguments)
        }
        timer = setTimeout(() => {
         func.apply(this, arguments)
        }, delay)
    }
  }
},
mounted() {
  this.debounceInput = this.debounce(this.showApp, 1000)      
},

節流

定義

頻繁操作稀釋函數執行，頻繁操作時，每隔n秒才觸發一次

使用場景

1. 鼠標點擊，mousedown,mousemove單位時間只執行一次

2. 滾動事件，懶加載、滾動加載、加載更多或監聽滾動條位置

3. 防止高頻點擊提交，防止表單重復提交

代碼

// utils.js
function throttle (func, delay = 300) {    
    let prev = 0
    return function() {
        let now = Date.now()
        if ((now - prev) >= delay) {
            func.apply(this, arguments)
            prev = Date.now()
        }
    }
}

以上就是vue中如何使用防抖和節流，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。