溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

關(guān)于JS防抖動(dòng)的案例分析

發(fā)布時(shí)間：2020-08-06 14:31:54 來(lái)源：億速云 閱讀：181 作者：小新 欄目：web開(kāi)發(fā)

小編給大家分享一下關(guān)于JS防抖動(dòng)的案例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

前言

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

題目

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

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

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

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

接下來(lái)我們將它抽象一下：

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è)弱爆了的處理，那有沒(méi)有更好的方式呢？有，比如節(jié)流。

以上是關(guān)于JS防抖動(dòng)的案例分析的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手