javaScript基本功之函數防抖與節流

時間 2019-12-11

原文原文鏈接

一、函數節流與防抖html

函數的節流與防抖是一種優化頻繁調用時優化的方案。ajax

好比canvas畫筆時頻繁獲取位置點繪畫會增大客服端CPU壓力，那麼就須要那控制頻繁操做爲一個範圍內來優化而不影響繪畫效果，canvas

這樣能讓頁面瀏覽更加順暢，不會由於js的執行而發生卡頓。函數

函數節流是指必定時間內js方法只調用一次。好比人的眨眼睛，就是必定時間內眨一次。這是函數節流最形象的解釋。
函數防抖是指頻繁觸發的狀況下，只有足夠的空閒時間，才執行代碼一次。好比生活中的坐公交，就是必定時間內，若是有人陸續刷卡上車，司機就不會開車。只有別人沒刷卡了，司機纔開車。優化

函數防抖:this

好比搜索框中止輸入後自動查詢數據spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
<input type="text" id="text">
<script>

var oText = document.querySelector( "#text" );
function debunce( delay ){
    var timer = null;
    return function(){
        var text = this.value;
        clearTimeout( timer );
        timer = setTimeout( function(){
            console.log( "ajax-->" + text );
        }, delay );
    }
}

oText.onkeyup = debunce( 1000 );

</script>    
</body>
</html>

函數防抖還能夠使用在提交數據時限制頻繁觸發屢次提交而實現一次提交。code

函數節流:htm

好比縮放窗口時觸發resize事件的防止頻繁觸發的控制調用。blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
<div id="text"></div>
<script>
var oText = document.querySelector( "#text" );
function throttle(fn, delay){
    var startDate,
        timer;
    return function(ev){
        var currDate = +new Date();
        clearTimeout( timer );
        if( !startDate ){
            startDate = currDate;
            fn();
        }else{
            if( currDate - startDate >= delay ){
                startDate = currDate;
                fn();
            }else{
                timer = setTimeout( fn, 500 );
            }
        }
    }
}

function fn(){
    var d = new Date();
    console.log( d );
    oText.innerHTML = document.documentElement.clientWidth;
}

window.onresize = throttle( fn, 1000 );

</script>
</body>
</html>