快捷導(dǎo)航

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

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

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

前言

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

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

概念

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

防抖(debounce)：

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

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

節(jié)流(throttle)：

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

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

防抖

定義

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

使用場(chǎng)景

輸入框輸入
縮放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í)行，頻繁操作時(shí)，每隔n秒才觸發(fā)一次

使用場(chǎng)景

鼠標(biāo)點(diǎn)擊，mousedown,mousemove單位時(shí)間只執(zhí)行一次
滾動(dòng)事件，懶加載、滾動(dòng)加載、加載更多或監(jiān)聽滾動(dòng)條位置
防止高頻點(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()
        }
    }
}