快捷導(dǎo)航

vue中防抖和節(jié)流的使用方法

更新時間：2021年08月05日 15:01:41 作者：楊柒柒柒呀

防抖和節(jié)流是我們在開發(fā)過程中常用優(yōu)化性能的方式,可以減少不必要的計算,不浪費(fèi)資源,只在適合的時候再進(jìn)行觸發(fā)計算,這篇文章主要給大家介紹了關(guān)于vue中防抖和節(jié)流使用的相關(guān)資料,需要的朋友可以參考下

前言

在一個電影項目中，我想在電影的列表中，保存下拉的當(dāng)前位置，防止你切換頁面后，再切換回當(dāng)前的電影列表頁，他就又回到電影的第一條數(shù)據(jù)。

這時候，我不想每次只要滑動一點(diǎn)，就保存當(dāng)前位置，我想隔一段時間，保存一次，這時候，就可以使用防抖和節(jié)流。

概念

說白了，防抖節(jié)流就是使用定時器來實(shí)現(xiàn)我們的目的。

防抖(debounce)：

在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計時。

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

節(jié)流(throttle)：

規(guī)定在一個單位時間內(nèi)，只能觸發(fā)一次函數(shù)，如果這個單位時間內(nèi)觸發(fā)多次函數(shù)，只有一次生效。

典型的案例就是鼠標(biāo)不斷點(diǎn)擊觸發(fā)，規(guī)定在n秒內(nèi)多次點(diǎn)擊只生效一次。

防抖

定義

頻繁操作防止抖動，在操作后 n 秒內(nèi)不操作，才觸發(fā)事件，若繼續(xù)操作，則重新計時

使用場景

輸入框輸入
縮放resize

代碼

// utils.js
// immediate 是否開始立即執(zhí)行
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)
    }
}

方法二：寫在當(dāng)前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)      
},

節(jié)流

定義

頻繁操作稀釋函數(shù)執(zhí)行，頻繁操作時，每隔n秒才觸發(fā)一次

使用場景

鼠標(biāo)點(diǎn)擊，mousedown,mousemove單位時間只執(zhí)行一次
滾動事件，懶加載、滾動加載、加載更多或監(jiān)聽滾動條位置
防止高頻點(diǎn)擊提交，防止表單重復(fù)提交

代碼

// 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()
        }
    }
}