javaScript基本功之函数防抖与节流

1、函数节流与防抖

函数的节流与防抖是一种优化频繁调用时优化的方案。

比如canvas画笔时频繁获取位置点绘画会增大客服端CPU压力，那么就需要那控制频繁操作为一个范围内来优化而不影响绘画效果，

这样能让页面浏览更加顺畅，不会因为js的执行而发生卡顿。

函数节流是指一定时间内js方法只调用一次。比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。
函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。

函数防抖:

比如搜索框停止输入后自动查询数据

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

函数防抖还可以使用在提交数据时限制频繁触发多次提交而实现一次提交。

函数节流:

比如缩放窗口时触发resize事件的防止频繁触发的控制调用。

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

以上的节流添加最后一次的定时触发，那么停止操作后会进行最后一次触发，只是这个触发会延迟0.5s,那么就可以防止最后一次停止后不触发而导致不能精确。

javaScript基本功之函数防抖与节流

猜你喜欢