js 函數(shù)節(jié)流和防抖

atinosun 發(fā)布于2019-08-23 12:25 / 3014人閱讀

摘要：函數(shù)節(jié)流和防抖防抖和節(jié)流的作用都是防止函數(shù)多次調用。頁面窗口的事件方法節(jié)流方法閉包節(jié)流防抖一段時間內觸發(fā)事件只執(zhí)行一次。

js 函數(shù)節(jié)流和防抖

防抖和節(jié)流的作用都是防止函數(shù)多次調用。區(qū)別在于，假設一個用戶一直觸發(fā)這個函數(shù)，且每次觸發(fā)函數(shù)的間隔小于wait，防抖的情況下只會調用一次，而節(jié)流的 情況會每隔一定時間（參數(shù)wait）調用函數(shù)。

throttle 節(jié)流

節(jié)流是將多次執(zhí)行變成每隔一段時間執(zhí)行。
每隔一段時間后執(zhí)行一次，也就是降低頻率，將高頻操作優(yōu)化成低頻操作。

應用場景

觸發(fā)mousemove事件的時候，如鼠標移動。

觸發(fā)keyup事件的情況，如搜索。

觸發(fā)scroll事件的時候，譬如鼠標向下滾動停止時觸發(fā)加載數(shù)據(jù)。

頁面窗口的resize事件

coding

方法1 節(jié)流

// function resizehandler(fn, delay){
//   clearTimeout(fn.timer);
//   fn.timer = setTimeout(() => {
//      fn();
//   }, delay);
// }
// window.onresize = () => resizehandler(fn, 1000);

方法2 閉包節(jié)流

function resizehandler(fn, delay){
    let timer = null;
    return function() {
      const context = this;
      const args=arguments;
      clearTimeout(timer);
      timer = setTimeout(() => {
         fn.apply(context,args);
      }, delay);
    }
 }
 window.onresize = resizehandler(fn, 1000);

debounce 防抖

一段時間內觸發(fā)事件只執(zhí)行一次。

應用場景

按鈕點擊事件/input事件，防止用戶多次重復提交

電話號碼輸入的驗證，只需停止輸入后進行一次。

coding

function resizehandler(fn, delay, duration) {
        let timer = null;
        let beginTime = +new Date();
        return function() {
          const context = this;
          const args = arguments;
          const currentTime = +new Date();
          timer && clearTimeout(timer);
          if ((currentTime - beginTime) >= duration) {
            fn.call(context, args);
            beginTime = currentTime;
           } else {
             timer = setTimeout(() => {
               fn.call(context, args)
             }, delay);
           }
        }
      }

        window.onresize = resizehandler(fn, 1000, 1000);

Demo
CodePen-demo

參考文章  
http://www.alloyteam.com/2012...

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98496.html

JS之節(jié)流和防抖

摘要：節(jié)流在指定時間之內，讓函數(shù)只觸發(fā)一次。防抖對于一定時間段的連續(xù)的函數(shù)調用，只讓其執(zhí)行一次。總結以上只是很簡單的寫了一下節(jié)流和防抖的原理，在里，實現(xiàn)起來更加復雜，但是背后的原理核心就是上邊代碼寫的。概述在平時的開發(fā)中，經(jīng)常會聽到兩個差不多很相近的詞。節(jié)流（throttle）和防抖（debounce）。這是兩個類似又有些不同的優(yōu)化方案。節(jié)流：在指定時間之內，讓函數(shù)只觸發(fā)一次。防...

fevin 2019-08-26 17:15 評論0 收藏0
前端優(yōu)化 —— 函數(shù)的節(jié)流和防抖

摘要：文件為函數(shù)要傳入的參數(shù)返回事件處理函數(shù)添加事件監(jiān)聽節(jié)流函數(shù)一般用于事件的情況較多，因為這些事件的觸發(fā)是連續(xù)性的，需要在一個時間間隔內只觸發(fā)一次。 showImg(https://segmentfault.com/img/remote/1460000018998747); 閱讀原文前言在前端開發(fā)當中我們經(jīng)常會綁定一些事件觸發(fā)的某些程序執(zhí)行，有時這些事件會連續(xù)觸發(fā)，如瀏覽器窗口 s...

ralap 2019-08-23 12:18 評論0 收藏0
關于js節(jié)流函數(shù)throttle和防抖動debounce

摘要：主要實現(xiàn)在于通過異步操作的事件間隔，對于前后兩次調用方法打時間進行比較，用清空定時器的操作實現(xiàn)多余調用操作的舍棄。廢話不多說，直奔主題。什么是throttle和debounce？這兩個方法的主要目的多是用于性能優(yōu)化。最常見的應用嘗盡就是在通過監(jiān)聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說，沒有處理時滑動一次滾動條scroll事件會觸發(fā)多...

張紅新 2019-08-22 16:45 評論0 收藏0
關于js節(jié)流函數(shù)throttle和防抖動debounce

摘要：主要實現(xiàn)在于通過異步操作的事件間隔，對于前后兩次調用方法打時間進行比較，用清空定時器的操作實現(xiàn)多余調用操作的舍棄。廢話不多說，直奔主題。什么是throttle和debounce？這兩個方法的主要目的多是用于性能優(yōu)化。最常見的應用嘗盡就是在通過監(jiān)聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說，沒有處理時滑動一次滾動條scroll事件會觸發(fā)多...

lieeps 2019-08-29 15:12 評論0 收藏0
關于js節(jié)流函數(shù)throttle和防抖動debounce

摘要：主要實現(xiàn)在于通過異步操作的事件間隔，對于前后兩次調用方法打時間進行比較，用清空定時器的操作實現(xiàn)多余調用操作的舍棄。廢話不多說，直奔主題。什么是throttle和debounce？這兩個方法的主要目的多是用于性能優(yōu)化。最常見的應用嘗盡就是在通過監(jiān)聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說，沒有處理時滑動一次滾動條scroll事件會觸發(fā)多...

shery 2019-08-02 10:18 評論0 收藏0