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

Posted 2021-01-09 小数点就是问题

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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基本功之函数防抖与节流的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript性能优化8——防抖与节流

JavaScript：函数防抖与节流

JavaScript防抖与节流

JavaScript防抖与节流函数：提高应用性能的利器

JavaScript防抖与节流，深入浅出，一本正经讲透彻