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

專注于為中小企業提供成都做網站、網站制作服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業黃龍免費做網站提供優質的服務。我們立足成都，凝聚了一批互聯網行業人才，有力地推動了近1000家企業的穩健成長，幫助中小企業通過網站建設實現規模擴充和轉變。

throttle 節流

事件觸發到結束后只執行一次。

應用場景

觸發mousemove事件的時候， 如鼠標移動。

觸發keyup事件的情況， 如搜索。

觸發scroll事件的時候， 譬如鼠標向下滾動停止時觸發加載數據。

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 防抖

事件出發后一定的事件內執行一次。

應用場景

window 變化觸發resize事件是， 只執行一次。

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

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函數節流和防抖的應用場景有哪些”有了一定的了解，如果想了解更多相關知識，歡迎關注創新互聯網站制作公司行業資訊頻道，感謝各位的閱讀！

文章題目：javascript函數節流和防抖的應用場景有哪些-創新互聯
文章地址：http://newbst.com/article44/dijphe.html

成都網站建設公司_創新互聯，為您提供網站制作、軟件開發、移動網站建設、網站設計、網站內鏈、面包屑導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯