技術標籤：js

目錄

防抖動函式

程式碼

使用

節流函式

程式碼

使用

防抖動函式

在delay時間內，若多次觸發該函式，則會重新計時

適用場景

1.監聽圖片的載入是否完成，用圖片的load事件，會被頻繁的觸發，可使用

2.鍵盤的keyup事件，當用戶停止輸入時，才傳送請求，可使用

程式碼

// 防抖動函式,不讓事件頻繁的進行觸發函式
export function debance(func, delay) {
  //建立一個初始值
  let timer = null;
  return function(...args) {
    //判斷是否存在，若存在，則清楚
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, delay)
  }
}
 

使用

 //設定防抖動函式
 this.refresh = debance(this.$refs.detailScroll.refresh, 100)

 //使用防抖動函式
 this.$bus.$on('detailGoodsItemImgLoad', () => {
    this.refresh();
 })

節流函式

在delay單位時間內，只能觸發一次函式。如果在這個時間內觸發多次函式，只有一次生效。

適用場景

1.若需要每隔一段時間就進行一次網路請求，可以使用

2.輪播圖的頻繁觸發滑動，設定某個時間只能滑動一次，可以使用

程式碼

//函式節流
function throttle(fn,delay) {
    // 定義一個鎖
    let lock= true; 
    return function (...args) {
        // 若被鎖住，則直接返回
        if (!lock) return;
        //若沒被鎖，進來後，立即把鎖設定為false
        lock= false;
        setTimeout(() => { 
            fn.apply(this, args);
            //時間一過，開鎖
            lock= true;
        }, delay);
    };
}
 

使用

 function demo(){
   console.log('----')
 }
 //設定節流函式
 this.refresh = throttle(demo, 100)

 //使用節流函式
 this.$bus.$on('detailGoodsItemImgLoad', () => {
    this.refresh();
 })