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

2021-06-17 10:05

阅读：396

YPE html>

标签：cpu input 限制 log func java OLE har date

1、函数节流与防抖

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

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

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

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

函数防抖:

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

Document

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

函数节流:

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

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
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基本功之函数防抖与节流

标签：cpu input 限制 log func java OLE har date

原文地址：https://www.cnblogs.com/zhangzhicheng/p/9721425.html

上一篇：Spring Chapter4 WebSocket 胡乱翻译（二）

下一篇：Golang对map中的key进行排序

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：javaScript基本功之函数防抖与节流
文章链接：http://soscw.com/index.php/essay/94992.html

亲，登录后才可以留言！

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

评论

热门文章

推荐文章

最新文章

置顶文章