JS防抖動

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

 

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

 

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

 

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

 

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