vue中防抖和節流的使用方法

Posted on by

前言

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

這時候，我不想每次隻要滑動一點，就保存當前位置，我想隔一段時間，保存一次，這時候，就可以使用防抖和節流。

概念

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

防抖(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中使用

使用方法與防抖相同

總結

到此這篇關於vue中防抖和節流使用的文章就介紹到這瞭,更多相關vue防抖和節流使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：