淺析Vue 防抖與節(jié)流的使用

更新時(shí)間：2019年11月14日 14:09:05 作者：夜夕i

防抖節(jié)流就是使用定時(shí)器來(lái)實(shí)現(xiàn)我們的目的。這篇文章通過(guò)實(shí)例代碼給大家介紹vue防抖與節(jié)流的使用，感興趣的朋友跟隨小編一起看看吧

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

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

概念

說(shuō)白了，防抖節(jié)流就是使用定時(shí)器來(lái)實(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)擊只生效一次。

用法

防抖(debounce)

下拉列表，隔一段時(shí)間保存當(dāng)前下拉位置。

我們可以在 mounted 鉤子中實(shí)現(xiàn)我們的防抖：

// 防抖 定時(shí)器
let timer;
//list就是電影列表 ref="list" $el獲取DOM元素
this.$refs.list.$el.addEventListener("scroll", e => {
 console.log("---->",e.target.scrollTop) //不使用防抖
 if (timer) {
 //清空timer
 clearTimeout(timer);
 }
 timer = setTimeout(() => {
 console.log(e.target.scrollTop) //使用防抖
 
 //在sessionStorage中保存當(dāng)前下拉位置
 // sessionStorage.setItem("position", e.target.scrollTop);
 }, 75); //75mm為最佳
});

效果演示(隔一段時(shí)間保存當(dāng)前位置)：

加 ----> 為不使用防抖，沒(méi)加的則使用防抖

輸入框搜索隔段時(shí)間進(jìn)行搜索請(qǐng)求：

<template>
 <div>
  <input type="text" @keyup="debounce" />
 </div>
</template>

<script>
//定義 timer
let timer;
export default {
 methods: {
  debounce: function() {
   if (timer) {
    clearTimeout(timer);
   }
   timer = setTimeout(() => {
    console.log("防抖...");
    timer = undefined;
   }, 2000);
  }
 }
};
</script>

節(jié)流(throttle)

在n秒內(nèi)點(diǎn)擊多次，只有一次生效。

<template>
 <div>
  <button @click="throttle">按鈕</button>
 </div>
</template>

<script>
//定義
let timer, lastTime;
export default {
 methods: {
  throttle: function() {
   let now = +new Date();
   if (lastTime && lastTime - now < 200) { //在200ms內(nèi)點(diǎn)擊多次，只有一次生效
    clearTimeout(timer);
   }
   timer = setTimeout(() => {
    console.log("點(diǎn)擊...");
    lastTime = +new Date();
   }, 200);
  }
 }
};
</script>

效果演示：

補(bǔ)充

當(dāng)然，也可以對(duì)這兩個(gè)方法進(jìn)行封裝，以便在多處使用。

/**
 * 函數(shù)防抖 (只執(zhí)行最后一次點(diǎn)擊)
 */
export const Debounce = (fn, t) => {
  let delay = t || 500;
  let timer;
  console.log(fn)
  console.log(typeof fn)
  return function () {
    let args = arguments;
    if(timer){
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      timer = null;
      fn.apply(this, args);
    }, delay);
  }
};
/*
 * 函數(shù)節(jié)流
 */
export const Throttle = (fn, t) => {
  let last;
  let timer;
  let interval = t || 500;
  return function () {
    let args = arguments;
    let now = +new Date();
    if (last && now - last < interval) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        last = now;
        fn.apply(this, args);
      }, interval);
    } else {
      last = now;
      fn.apply(this, args);
    }
  }
};

總結(jié)

以上所述是小編給大家介紹的Vue 防抖與節(jié)流的使用，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: