日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后,達(dá)者為師

網(wǎng)站首頁(yè) Vue 正文

Vue中使用防抖與節(jié)流的方法_vue.js

作者:丿小破孩灬 ? 更新時(shí)間: 2022-03-31 Vue

何為防抖/節(jié)流

首先先說說何為防抖與節(jié)流

防抖(debounce)

防抖就是一段時(shí)間內(nèi)會(huì)多次觸發(fā)相同的事件,而我們的目的卻只是想讓他們?cè)诓挥|發(fā)的多久以后再執(zhí)行該事件,例如鼠標(biāo)移動(dòng)事件(mousemove)、輸入框變更事件(change)等等,這個(gè)時(shí)候我們就需要一個(gè)方法去控制他,一段時(shí)間內(nèi)沒執(zhí)行該事件后,執(zhí)行該事件,即為防抖

節(jié)流(throttle)

節(jié)流就是短時(shí)間內(nèi)會(huì)多次觸發(fā)相同的事件,而我們的目的卻只是想讓他們既定時(shí)間內(nèi)只觸發(fā)一次,例如滾輪事件(scroll)、鼠標(biāo)點(diǎn)擊事件(click)等等,這個(gè)時(shí)候我們就需要一個(gè)方法去控制他,一段時(shí)間(0.5S/1S)之內(nèi)只能觸發(fā)一次事件,即為節(jié)流

防抖(debounce)

// 防抖
export default function debounce(fn, time) {
  time = time || 200
  // 定時(shí)器
  let timer = null
  return function(...args) {
    var _this = this
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function() {
      timer = null
      fn.apply(_this, args)
    }, time)
  }
}

節(jié)流(throttle)

// 節(jié)流
export default function throttle(fn, time) {
  let timer = null
  time = time || 1000
  return function(...args) {
    if (timer) {
      return
    }
    const _this = this
    timer = setTimeout(() => {
      timer = null
    }, time)
    fn.apply(_this, args)
  }
}

頁(yè)面使用

直接就用click的點(diǎn)擊速度模擬觸發(fā)事件的頻率了

<el-button @click="clickDebounce">防抖</el-button>
<el-button @click="clickThrottle">節(jié)流</el-button>
//引用定義好的JS方法
import debounce from '@/utils/debounce'
import throttle from '@/utils/throttle'
methods: {
    clickDebounce: debounce((e) => {
      console.log(1)
    }, 1000),
    clickThrottle: throttle((e) => {
      console.log(2)
    }, 1000),
}

使用場(chǎng)景

使用場(chǎng)景根據(jù)業(yè)務(wù)需求可以有很多很多 簡(jiǎn)單舉兩個(gè)例子

防抖(debounce)搜索框自動(dòng)搜索的時(shí)候,可搜索下拉框遠(yuǎn)程搜索的時(shí)候,用戶在沒輸入完的情況下,防抖可以節(jié)約請(qǐng)求資源。
鼠標(biāo)移動(dòng)的時(shí)候,鼠標(biāo)停下來不動(dòng)再執(zhí)行方法

節(jié)流(throttle)滾動(dòng)頁(yè)面的時(shí)候

總結(jié)

原文鏈接:https://blog.csdn.net/weixin_44854636/article/details/122549517

欄目分類
最近更新