javascript函數(shù)節(jié)流和防抖的應(yīng)用場景有哪些

小編給大家分享一下javascript函數(shù)節(jié)流和防抖的應(yīng)用場景有哪些，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

throttle 節(jié)流

事件觸發(fā)到結(jié)束后只執(zhí)行一次。

應(yīng)用場景

觸發(fā)mousemove事件的時(shí)候， 如鼠標(biāo)移動(dòng)。

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

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

coding

方法1  防抖

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

方法2 閉包  防抖

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ā)后一定的事件內(nèi)執(zhí)行一次。

應(yīng)用場景

window 變化觸發(fā)resize事件是， 只執(zhí)行一次。

電話號碼輸入的驗(yàn)證， 只需停止輸入后進(jìn)行一次。

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

看完了這篇文章，相信你對“javascript函數(shù)節(jié)流和防抖的應(yīng)用場景有哪些”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！