淺析Vue 防抖與節流的使用

發布時間: 2019-11-14 16:28:24 來源: 互聯網 欄目: JavaScript 點擊:

防抖節流就是使用定時器 來實現我們的目的。這篇文章通過實例代碼給大家介紹vue防抖與節流的使用,感興趣的朋友跟隨小編一起看看吧

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

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

概念

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

防抖(debounce):

在事件被觸發n秒后再執行回調,如果在這n秒內又被觸發,則重新計時。

典型的案例就是輸入框搜索:輸入結束后n秒才進行搜索請求,n秒內又輸入的內容,則重新計時。

節流(throttle):

規定在一個單位時間內,只能觸發一次函數,如果這個單位時間內觸發多次函數,只有一次生效。

典型的案例就是鼠標不斷點擊觸發,規定在n秒內多次點擊只生效一次。

用法

防抖(debounce)

下拉列表,隔一段時間保存當前下拉位置。

我們可以在 mounted 鉤子中實現我們的防抖:

// 防抖 定時器
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中保存當前下拉位置
 // sessionStorage.setItem("position", e.target.scrollTop);
 }, 75); //75mm為最佳
});

效果演示(隔一段時間保存當前位置):

加 ----> 為不使用防抖,沒加的則使用防抖

輸入框搜索隔段時間進行搜索請求:

<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>

 

節流(throttle)

在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內點擊多次,只有一次生效
    clearTimeout(timer);
   }
   timer = setTimeout(() => {
    console.log("點擊...");
    lastTime = +new Date();
   }, 200);
  }
 }
};
</script>

效果演示:

 

補充

當然,也可以對這兩個方法進行封裝,以便在多處使用。

/**
 * 函數防抖 (只執行最后一次點擊)
 */
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);
  }
};
/*
 * 函數節流
 */
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);
    }
  }
};

總結

以上所述是小編給大家介紹的Vue 防抖與節流的使用,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對我們網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

本文標題: 淺析Vue 防抖與節流的使用
本文地址: http://www.leskzw.tw/wangluo/javascript/286409.html

如果認為本文對您有所幫助請贊助本站

支付寶掃一掃贊助微信掃一掃贊助

  • 支付寶掃一掃贊助
  • 微信掃一掃贊助
  • 支付寶先領紅包再贊助
    聲明:凡注明"本站原創"的所有文字圖片等資料,版權均屬編程客棧所有,歡迎轉載,但務請注明出處。
    微信小程序tabBar設置實例解析Vue中常用rules校驗規則(實例代碼)
    Top 广东好彩1中奖规则