通過實(shí)例講解JS如何防抖動

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

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

前言

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

題目

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

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

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

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

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

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))

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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