通過實例講解JS如何防抖動

更新時間：2019年06月15日 10:21:28 作者：Unknw

這篇文章主要介紹了通過實例講解JS如何防抖動，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，,需要的朋友可以參考下

前言

這道題目經常與事件觸發(fā)器同時存在，為了考察面試者在一些具體業(yè)務流程上（信息流，搜索框輸入查詢）等，能否綜合的考慮實現思路。

題目

在某些信息列表中一般采用瀑布流，滾動一屏時加載相應的數據，請思考如何避免連續(xù)下拉時而產生的問題（可能是頁面崩潰，也可能是巨卡無比）。

一般情況下，如果碰到這樣的面試題，防抖動機制，就能很好的解決，這方面最早的應用實踐還是Twitter，開發(fā)者寫了一篇博客，詳細的闡述了如何解決這樣的問題。那么，說到防抖動，其核心內涵在于延遲處理，也就是將一系列的事件處理程序全部延遲，保障推送進來的第一次事件處理。

event.on('scroll', function(e){ 
var fun; 
return function(){ 
if(fun) clearTimeout(fun);
fun = setTimeout(function(){ 
// console.log('1')
},500);
}
}());

這是最常見的一種方式，如果scroll的次數較多時，可以先將真實的函數放置在定時器中。

接下來我們將它抽象一下：

function de(something,delay){ 
var fun; 
return function(){ 
if(fun) clearTimeout(fun);
fun = setTimeout(function(){ 
something();
},delay);
}
}
function scrollToList(){
}
event.on('scroll', de(scrollToList,1000))
event.on('scroll', de(scrollToList,2000))

顯然這是一個弱爆了的處理，那有沒有更好的方式呢？有，比如節(jié)流。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

淺析Javascript的自動分號插入(ASI)機制
我們大家都知道在寫java和c時，必須要在語句后加分號，否則編譯通不過。而js不同，存在自動分好插入機制，下文簡稱ASI。它會給源代碼的 token 流自動插入分號。下面這篇文章我們就來談談Javascript的自動分號插入(ASI)機制。
2016-09-09
一文帶你徹底搞懂JS中的Map與Set
Set是一種叫做集合的數據結構(結構和Array很像),Map是一種叫做字典的數據結構,這篇文章主要為大家詳細介紹了JavaScript中Map與Set用法與區(qū)別,需要的小伙伴可以參考下
2023-11-11
JavaScript中的錯誤處理全面指南
在JavaScript開發(fā)中,錯誤處理是一個不可忽視的重要環(huán)節(jié),本文將深入探討JavaScript中的錯誤處理機制,包括錯誤的類型、捕獲與拋出錯誤的方法,需要的可以參考下
2024-10-10
Bootstrap的modal拖動效果
本文通過實例代碼給大家介紹了bootstrap的modal拖動效果，非常不錯，代碼簡單易懂，具有參考借鑒價值，需要的朋友參考下吧
2016-12-12
JS數組及對象遍歷方法代碼匯總
這篇文章主要介紹了JS數組及對象遍歷方法代碼匯總,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-06-06
JavaScript 定義function的三種方式小結
JavaScript中定義function有以下三種方式.
2009-10-10
微信小程序自定義計時器功能
這篇文章主要為大家詳細介紹了微信小程序自定義計時器功能，設置一個時間，可以開始倒計時、暫停，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-09-09
瀏覽器圖片選擇預覽、旋轉、批量上傳的JS代碼實現
這篇文章主要介紹了瀏覽器圖片選擇預覽、旋轉、批量上傳的JS代碼實現，有需要的朋友可以參考一下
2013-12-12
javascript代碼在ie8里報錯 document.getElementById(...) 為空或不是對象的解決方
今天更升級了ie8,發(fā)現原來在ie7下可以運行的代碼，不能運行了，發(fā)現了一些細節(jié)，附臨時修改辦法。
2009-11-11
得到元素真實的背景顏色的js代碼
這個函數來自Rico，Longbill及Dnew.cn修改。說明: 傳入參數一個，為元素的id值或元素本身，返回為元素的真實背景色值（字符串）。背景值均為16進制的值（原代碼是是IE里面返回的是16進制的值，而Mozilla則是rgb值，Dnew.cn將其修改為均返回16進制的值）。
2007-12-12