摘要:它和防抖動最大的區別就是,節流函數不管事件觸發有多頻繁,都會保證在規定時間內一定會執行一次真正的事件處理函數。
防抖動
其核心內涵在于延遲處理,也就是將一系列的事件處理程序全部延遲,保障推送進來的第一次事件處理
var debounce = function(fn,delay,mustRunDelay){ var timer = null; var t_start; return function(){ var context = this; var args = arguments; var t_curr = +new Date(); clearTimeout(timer); if(!t_start){ t_start = t_curr; } if(t_curr - t_start >= mustRunDelay) { fn.apply(context,args); t_start = t_curr } else { timer = setTimeout(function(){ fn.apply(context,args); },delay); } } }
使用方法
window.onresize = debounce(resizeDiv,50,100);
//onresize為事件發生對象
//resizeDiv為要執行的函數
//50為定時器的函數
//1000多長時間需要執行一次
節流函數允許一個函數在規定的時間內只執行一次。
它和防抖動最大的區別就是,節流函數不管事件觸發有多頻繁,都會保證在規定時間內一定會執行一次真正的事件處理函數。
$(document).ready(function(){ $(document).on("scroll", _.throttle(function(){ check_if_needs_more_content(); }, 300)); function check_if_needs_more_content() { pixelsFromWindowBottomToBottom = 0 + $(document).height() - $(window).scrollTop() -$(window).height(); if (pixelsFromWindowBottomToBottom < 200){ // Here it would go an ajax request $("body").append($(".item").clone()); } } });
這是一個節流閥的案例
、
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/89879.html
摘要:防抖動與節流點擊查看源碼防抖動默認不立即觸發保存作用域保存參數初始化清空所有定時器如果是立即觸發為空時觸發操作時間后置空時間后觸發操作防抖動立即觸發防抖動節流默認立即觸發保存作用域保存參數為空時立即觸發時間后觸發操作節流立即觸發節流總結 防抖動與節流 點擊查看源碼 防抖動 var debounce = function (fn, delay, isImmediate) { v...
摘要:起因面試被問到了節流和防抖動自己對這兩個的概念比較模糊都不知道回答了什么鬼從語文和英語學起首先先看字面意思節流的意思就是水龍頭關小點頻率不要那么高防抖動這根彈簧你不要來回蹦了我就要你最后停下來的沒有發生形變的那一刻舉個例子節流在改變窗口大小 起因 面試被問到了節流和防抖動, 自己對這兩個的概念比較模糊, 都不知道回答了什么鬼 從語文和英語學起 首先, 先看字面意思:節流(throttl...
摘要:簡單的防抖動處理,一秒內點擊一次向服務器請求數據點擊按鈕向后臺請求數據優化點另外一些防抖動的小技巧,請參考封裝好的簡單防抖動函數防抖動函數要執行的函數,間隔毫秒數調用現成的工具庫防抖動節流 1. 簡單的防抖動處理,一秒內點擊一次 var timer = null; $(.coupon).click(function(){ if (timer) { return; } ...
閱讀 632·2021-11-22 15:32
閱讀 2720·2021-11-19 09:40
閱讀 2313·2021-11-17 09:33
閱讀 1263·2021-11-15 11:36
閱讀 1864·2021-10-11 10:59
閱讀 1475·2019-08-29 16:41
閱讀 1780·2019-08-29 13:45
閱讀 2150·2019-08-26 13:36