成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

JavaScript：函數(shù)防抖與函數(shù)節(jié)流

elina / 1767人閱讀

摘要：函數(shù)防抖簡(jiǎn)單實(shí)現(xiàn)模擬請(qǐng)求獲取函數(shù)的作用域和變量清除定時(shí)器節(jié)流名詞解釋連續(xù)執(zhí)行函數(shù)，每隔一定時(shí)間執(zhí)行函數(shù)。效果函數(shù)防抖是某一段時(shí)間內(nèi)只執(zhí)行一次函數(shù)節(jié)流是間隔時(shí)間執(zhí)行，不管事件觸發(fā)有多頻繁，都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)。

防抖（debounce）

名詞解釋：在事件被觸發(fā)n秒后再執(zhí)行回調(diào)函數(shù)，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)。

使用場(chǎng)景：以百度輸入框例，比如你要查詢XXx，想實(shí)現(xiàn)輸完了XXx之后，再進(jìn)行搜索請(qǐng)求，這樣可以有效減少請(qǐng)求次數(shù)，節(jié)約請(qǐng)求資源。

函數(shù)防抖簡(jiǎn)單實(shí)現(xiàn)


節(jié)流（throttle）

名詞解釋：連續(xù)執(zhí)行函數(shù)，每隔一定時(shí)間執(zhí)行函數(shù)。規(guī)定一個(gè)單位時(shí)間，在這個(gè)單位時(shí)間內(nèi)，只能有一次觸發(fā)事件的回調(diào)函數(shù)執(zhí)行，如果在同一個(gè)單位時(shí)間內(nèi)某事件被觸發(fā)多次，只有一次能生效。


使用場(chǎng)景：鼠標(biāo)連續(xù)多次click事件，mousemove 事件，監(jiān)聽滾動(dòng)事件，比如是否滑到底部自動(dòng)加載更多等等...


函數(shù)節(jié)流簡(jiǎn)單實(shí)現(xiàn)


function throttle(fn, delay) {
    let lastTime; 
    let timer; 
    delay || (delay = 300); // 默認(rèn)間隔為300ms
    return function(arguments) {
        let context = this;
        let args = arguments;
        let nowTime = +new Date(); // 獲取系統(tǒng)當(dāng)前的時(shí)間
        if (lastTime && nowTime < lastTime+ delay) { // 當(dāng)前距離上次執(zhí)行的時(shí)間小于設(shè)置的時(shí)間間隔
            clearTimeout(timer); // 清除定時(shí)器
            timer = setTimeout(function() { // delay時(shí)間后，執(zhí)行函數(shù)
                lastTime= nowTime ;
                fn.apply(context, args);
            }, delay);
        } else { // 當(dāng)前距離上次執(zhí)行的時(shí)間大于等于設(shè)置的時(shí)間，直接執(zhí)行函數(shù)
            lastTime= nowTime ;
            fn.apply(context, args);
        }
    };
}



區(qū)別:

可以用日常進(jìn)入電梯來(lái)舉例，形象地描述節(jié)流和防抖的區(qū)別


函數(shù)防抖：如果A在10：00:00開門走入電梯內(nèi)（觸發(fā)事件），如果后續(xù)沒(méi)有人進(jìn)入電梯，電梯將在5秒鐘之后10：00:05關(guān)門（執(zhí)行事件監(jiān)聽器）。這時(shí)如果B在10：00:04走入電梯內(nèi)，電梯會(huì)在10：00:09才關(guān)門。


函數(shù)節(jié)流 ：如果A在10：00:00開門走入電梯內(nèi)（觸發(fā)事件），如果后續(xù)沒(méi)有人進(jìn)入電梯，電梯將在5秒鐘之后10：00:05關(guān)門（執(zhí)行事件監(jiān)聽器）。這時(shí)如果B在10：00:04走入電梯內(nèi)，電梯同樣是在10：00:05關(guān)門。這個(gè)時(shí)間從第一個(gè)人進(jìn)入電梯開始計(jì)時(shí)，不管在5秒之內(nèi)進(jìn)來(lái)多少人，電梯都會(huì)在10：00:05關(guān)門。如果一直沒(méi)有人進(jìn)來(lái)，則電梯不運(yùn)行。

總結(jié):

根據(jù)實(shí)際業(yè)務(wù)場(chǎng)景，合理的利用debounce（防抖）和throttle（節(jié)流）可以優(yōu)化性能和提高用戶體驗(yàn)。


效果：
函數(shù)防抖是某一段時(shí)間內(nèi)只執(zhí)行一次；
函數(shù)節(jié)流是間隔時(shí)間執(zhí)行，不管事件觸發(fā)有多頻繁，都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)。


原理：
防抖是維護(hù)一個(gè)計(jì)時(shí)器，規(guī)定在delay時(shí)間后觸發(fā)函數(shù)，但是在delay時(shí)間內(nèi)再次觸發(fā)的話，都會(huì)清除當(dāng)前的 timer 重新計(jì)時(shí)。這樣一來(lái)，只有最后一次操作事件才被真正觸發(fā)。
節(jié)流是通過(guò)判斷是否到達(dá)一定時(shí)間來(lái)觸發(fā)函數(shù)，若沒(méi)到規(guī)定時(shí)間則使用計(jì)時(shí)器延后，而下一次事件則會(huì)重新設(shè)定計(jì)時(shí)器。
           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/102055.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    高級(jí)函數(shù)技巧-函數(shù)防抖與節(jié)流
    
                                                     
    摘要：封裝方法也比較簡(jiǎn)單，書中對(duì)此問(wèn)題也進(jìn)行了處理使用定時(shí)器，讓函數(shù)延遲秒后執(zhí)行，在此秒內(nèi)，然后函數(shù)再次被調(diào)用，則刪除上次的定時(shí)器，取消上次調(diào)用的隊(duì)列任務(wù)，重新設(shè)置定時(shí)器。

在實(shí)際開發(fā)中，函數(shù)一定是最實(shí)用最頻繁的一部分，無(wú)論是以函數(shù)為核心的函數(shù)式編程，還是更多人選擇的面向?qū)ο笫降木幊?，都?huì)有函數(shù)的身影，所以對(duì)函數(shù)進(jìn)行深入的研究是非常有必要的。

函數(shù)節(jié)流
比較直白的說(shuō)，函數(shù)節(jié)流就是強(qiáng)制規(guī)定一...
    
                                                   
                          
    
                                
    
                                    whinc
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    The debounce & throttle in Javascript（防抖與節(jié)流）
    
                                                     
    摘要：您的支持是我最大的動(dòng)力，我會(huì)保證提供高質(zhì)與清晰的文章與您共同成長(zhǎng)。一些文章中的與上面所談到的設(shè)置類似。防抖防抖技術(shù)允許我們捆綁多個(gè)連續(xù)調(diào)用成為單一的一次調(diào)用。防抖的應(yīng)用這個(gè)簡(jiǎn)單的舉個(gè)


歡迎star和watch我的github issue blog，歡迎加入討論。您的支持是我最大的動(dòng)力，我會(huì)保證提供高質(zhì)與清晰的文章與您共同成長(zhǎng)。

節(jié)流[throttle]與防抖[debounce]在前...
    
                                                   
                          
    
                                
    
                                    XboxYan
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    前端進(jìn)擊的巨人（八）：淺談函數(shù)防抖與節(jié)流
    
                                                     
    摘要：隆重請(qǐng)出主角防抖與節(jié)流。防抖與節(jié)流的異同相同都是防止某一時(shí)間段內(nèi)，函數(shù)被頻繁調(diào)用執(zhí)行，通過(guò)時(shí)間頻率控制，減少回調(diào)函數(shù)執(zhí)行次數(shù)，來(lái)實(shí)現(xiàn)相關(guān)性能優(yōu)化。參考文章分鐘理解的節(jié)流防抖及使用場(chǎng)景函數(shù)防抖和節(jié)流

showImg(https://segmentfault.com/img/bVburM8?w=800&h=600);
本篇課題，或許早已是爛大街的解讀文章。不過(guò)春招系列面試下來(lái)，不少伙伴們還...
    
                                                   
                          
    
                                
    
                                    _Zhao
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    前端筆記(二) 對(duì)象的深淺拷貝，函數(shù)的防抖與節(jié)流，函數(shù)柯里化 ，圖片的預(yù)加載與懶加載
    
                                                     
    摘要：對(duì)象是無(wú)法通過(guò)這種方式深拷貝。這就是函數(shù)防抖和節(jié)流要做的事情。函數(shù)防抖當(dāng)觸發(fā)頻率過(guò)高時(shí)函數(shù)基本停止執(zhí)行而函數(shù)節(jié)流則是按照一定的頻率執(zhí)行事件。

對(duì)象的深淺拷貝
對(duì)象的深拷貝與淺拷貝的區(qū)別：

淺拷貝：僅僅復(fù)制對(duì)象的引用, 而不是對(duì)象本身。
深拷貝：把復(fù)制的對(duì)象所引用的全部對(duì)象都復(fù)制一遍

淺拷貝的實(shí)現(xiàn)：
var obj = {
   age : 18,
   person : {
   ...
    
                                                   
                          
    
                                
    
                                    dongxiawu
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    函數(shù)防抖與節(jié)流
    
                                                     
    摘要：函數(shù)防抖就是讓某個(gè)函數(shù)在上一次執(zhí)行后，滿足等待某個(gè)時(shí)間內(nèi)不再觸發(fā)此函數(shù)后再執(zhí)行，而在這個(gè)等待時(shí)間內(nèi)再次觸發(fā)此函數(shù)，等待時(shí)間會(huì)重新計(jì)算。

underscore.js提供了很多很有用的函數(shù)，今天想說(shuō)說(shuō)其中的兩個(gè)。這兩個(gè)函數(shù)都用于限制函數(shù)的執(zhí)行。

debounce

在解釋這個(gè)函數(shù)前，我們先從一個(gè)例子看下這個(gè)函數(shù)的使用場(chǎng)景。假設(shè)我們網(wǎng)站有個(gè)搜索框，用戶輸入文本我們會(huì)自動(dòng)聯(lián)想匹配出一些結(jié)果供...
    
                                                   
                          
    
                                
    
                                    Mr_zhang
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評(píng)論

                   
               

              

                

                  
0條評(píng)論
   
                
 
                      

              

           

           
        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    












<