影片直播原始碼，js實現節流和防抖

影片直播原始碼，js實現節流和防抖

防抖：

就是指連續觸發事件但是在設定的一段時間內中只執行最後後一次，例如：設定1000毫秒執行，當你觸發事件了，他會1000毫秒後執行，但是在還剩500毫秒的時候你又觸發了事件，那就會重新開始1000毫秒之後在執行。

記憶核心：重新開始

應用場景：搜尋框搜尋輸入 文字編輯器實時儲存

  let timerId = null
  document.querySelector('.int').onkeyup = function(){
    // 防抖
    if(timerId!== null){
      clearInterval(timerId)
    }
    timerId = setTimeout(() => {
      console.log("我是防抖");
    }, 1000);
  }

節流：

就是指連續觸發事件但是在設定的一段時間內中只執行一次函式。例如：設定1000毫秒執行，那你在1000毫秒觸發在多次，也只在1000毫秒後執行一次

記憶方法：不要打斷我

應用場景：高頻事件 例如 快速點選，滑鼠滑動，resize事件，scroll事件。下拉載入 影片播放等。

  let timerId = null
  document.querySelector('.int').onmouseover = function(){
    // 節流
    if(timerId!== null){
     return
    }
    timerId = setTimeout(() => {
      console.log("我是節流");
      timerId = null
    }, 1000);
  }

其實，我開發一般用lodash庫，利用裡面的debounce（防抖）和throttle（節流）來做的。

 以上就是影片直播原始碼，js實現節流和防抖， 更多內容歡迎關注之後的文章