成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

atinosun / 3019人閱讀

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

js 函數(shù)節(jié)流和防抖 
防抖和節(jié)流的作用都是防止函數(shù)多次調(diào)用。區(qū)別在于，假設(shè)一個(gè)用戶一直觸發(fā)這個(gè)函數(shù)，且每次觸發(fā)函數(shù)的間隔小于wait，防抖的情況下只會(huì)調(diào)用一次，而節(jié)流的 情況會(huì)每隔一定時(shí)間（參數(shù)wait）調(diào)用函數(shù)。
throttle 節(jié)流 
節(jié)流是將多次執(zhí)行變成每隔一段時(shí)間執(zhí)行。
每隔一段時(shí)間后執(zhí)行一次，也就是降低頻率，將高頻操作優(yōu)化成低頻操作。
應(yīng)用場景

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

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

觸發(fā)scroll事件的時(shí)候， 譬如鼠標(biāo)向下滾動(dòng)停止時(shí)觸發(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 防抖

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

應(yīng)用場景

按鈕點(diǎn)擊事件/input事件，防止用戶多次重復(fù)提交

電話號(hào)碼輸入的驗(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);

Demo
CodePen-demo

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98496.html

相關(guān)文章

  • JS之節(jié)流和防抖

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

    fevin 評(píng)論0 收藏0

  • 前端優(yōu)化 —— 函數(shù)的節(jié)流和防抖

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

    ralap 評(píng)論0 收藏0

  • 關(guān)于js節(jié)流函數(shù)throttle和防抖動(dòng)debounce

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

    張紅新 評(píng)論0 收藏0

  • 關(guān)于js節(jié)流函數(shù)throttle和防抖動(dòng)debounce

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

    lieeps 評(píng)論0 收藏0

  • 關(guān)于js節(jié)流函數(shù)throttle和防抖動(dòng)debounce

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

    shery 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<