摘要:它和防抖動(dòng)最大的區(qū)別就是,節(jié)流函數(shù)不管事件觸發(fā)有多頻繁,都會保證在規(guī)定時(shí)間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù)。
防抖動(dòng)
其核心內(nèi)涵在于延遲處理,也就是將一系列的事件處理程序全部延遲,保障推送進(jìn)來的第一次事件處理
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為事件發(fā)生對象
//resizeDiv為要執(zhí)行的函數(shù)
//50為定時(shí)器的函數(shù)
//1000多長時(shí)間需要執(zhí)行一次
節(jié)流函數(shù)允許一個(gè)函數(shù)在規(guī)定的時(shí)間內(nèi)只執(zhí)行一次。
它和防抖動(dòng)最大的區(qū)別就是,節(jié)流函數(shù)不管事件觸發(fā)有多頻繁,都會保證在規(guī)定時(shí)間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù)。
$(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()); } } });
這是一個(gè)節(jié)流閥的案例
、
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/89879.html
摘要:防抖動(dòng)節(jié)流節(jié)流使得一定時(shí)間內(nèi)只觸發(fā)一次函數(shù)。它和防抖動(dòng)最大的區(qū)別就是,節(jié)流函數(shù)不管事件觸發(fā)有多頻繁,都會保證在規(guī)定時(shí)間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù),而防抖動(dòng)只是在最后一次事件后才觸發(fā)一次函數(shù)。 防抖動(dòng)與節(jié)流 針對一些會頻繁觸發(fā)的事件如scroll、resize,如果正常綁定事件處理函數(shù)的話,有可能在很短的時(shí)間內(nèi)多次連續(xù)觸發(fā)事件,十分影響性能。所以我們對于這種事件我們要進(jìn)行防抖動(dòng)或...
摘要:防抖動(dòng)與節(jié)流點(diǎn)擊查看源碼防抖動(dòng)默認(rèn)不立即觸發(fā)保存作用域保存參數(shù)初始化清空所有定時(shí)器如果是立即觸發(fā)為空時(shí)觸發(fā)操作時(shí)間后置空時(shí)間后觸發(fā)操作防抖動(dòng)立即觸發(fā)防抖動(dòng)節(jié)流默認(rèn)立即觸發(fā)保存作用域保存參數(shù)為空時(shí)立即觸發(fā)時(shí)間后觸發(fā)操作節(jié)流立即觸發(fā)節(jié)流總結(jié) 防抖動(dòng)與節(jié)流 點(diǎn)擊查看源碼 防抖動(dòng) var debounce = function (fn, delay, isImmediate) { v...
摘要:起因面試被問到了節(jié)流和防抖動(dòng)自己對這兩個(gè)的概念比較模糊都不知道回答了什么鬼從語文和英語學(xué)起首先先看字面意思節(jié)流的意思就是水龍頭關(guān)小點(diǎn)頻率不要那么高防抖動(dòng)這根彈簧你不要來回蹦了我就要你最后停下來的沒有發(fā)生形變的那一刻舉個(gè)例子節(jié)流在改變窗口大小 起因 面試被問到了節(jié)流和防抖動(dòng), 自己對這兩個(gè)的概念比較模糊, 都不知道回答了什么鬼 從語文和英語學(xué)起 首先, 先看字面意思:節(jié)流(throttl...
摘要:簡單的防抖動(dòng)處理,一秒內(nèi)點(diǎn)擊一次向服務(wù)器請求數(shù)據(jù)點(diǎn)擊按鈕向后臺請求數(shù)據(jù)優(yōu)化點(diǎn)另外一些防抖動(dòng)的小技巧,請參考封裝好的簡單防抖動(dòng)函數(shù)防抖動(dòng)函數(shù)要執(zhí)行的函數(shù),間隔毫秒數(shù)調(diào)用現(xiàn)成的工具庫防抖動(dòng)節(jié)流 1. 簡單的防抖動(dòng)處理,一秒內(nèi)點(diǎn)擊一次 var timer = null; $(.coupon).click(function(){ if (timer) { return; } ...
閱讀 644·2021-11-22 15:32
閱讀 2731·2021-11-19 09:40
閱讀 2323·2021-11-17 09:33
閱讀 1281·2021-11-15 11:36
閱讀 1881·2021-10-11 10:59
閱讀 1491·2019-08-29 16:41
閱讀 1793·2019-08-29 13:45
閱讀 2166·2019-08-26 13:36