节流阀以及案例

m0_63400611

已于 2022-05-18 16:18:41 修改

阅读量230

点赞数

分类专栏： ajax 文章标签： ajax

于 2022-04-07 17:06:33 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/124020528

版权

ajax 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

什么是节流

节流策略,可以减少一段时间内时间的触发频率,直到上一个同样的事件结束才能重新触发

节流的应用场景

鼠标连续不断的触发某事件(如点击),在单位时间内只触发一次
懒加载时要监听计算滚动条的位置,但不必每次滑动都触发,可以降低计算的频率,而不去浪费CPU资源

节流阀的概念

节流阀为空则可以执行下次操作,不为空则不能执行下次操作

当前操作执行完,必须将节流阀重置为空,表示可以执行下次操作了

每次执行操作前,必须先判断节流阀是否为空

节流案例:鼠标跟随效果

不使用节流实现鼠标跟随效果

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>跟随鼠标的天使</title>

    <style>
        img {
            position: absolute;
            top: 2px;
        }
    </style>

</head>

<body>

    <img src="./img/angel.gif" alt="">

    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            //1.只要鼠标移动就会触发这个事件
            //			console.log('aa');
            //2.每次鼠标移动,获取最新的鼠标坐标,把这个x和y坐标作为图片的top和left值就可以移动图片
            var x = e.pageX;
            var y = e.pageY;
            //			console.log(x,y);
            //一定要给left top添加 px 单位
            pic.style.left = x - 30 + 'px';
            pic.style.top = y - 40 + 'px';
        })
    </script>
</body>

</html>

使用节流阀优化鼠标跟随效果

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>跟随鼠标的天使</title>

    <style>
        img {
            position: absolute;
            top: 2px;
        }
    </style>

</head>

<body>

    <img src="./img/angel.gif" alt="">

    <script>
        var pic = document.querySelector('img');
        var timer = null; //预定义一个timer节流阀
        document.addEventListener('mousemove', function(e) {
            if (timer) { //判断节流阀是否为空 为空则证明距离上次执行间隔不足16毫秒
                return
            }
            timer = setTimeout(function() {
                //1.只要鼠标移动就会触发这个事件
                //			console.log('aa');
                //2.每次鼠标移动,获取最新的鼠标坐标,把这个x和y坐标作为图片的top和left值就可以移动图片
                //			console.log(x,y);
                //一定要给left top添加 px 单位
                pic.style.left = e.pageX - 30 + 'px';
                pic.style.top = e.pageY - 40 + 'px';
                timer = null; //清空timer节流阀 方便下次开启延时器
            }, 30)
        })
    </script>
</body>

</html>

总结防抖和节流的区别

防抖: 如果事件被频繁的触发,防抖能保证只有最后一次触发生效,前面的多次触发都会被忽略

节流: 如果事件被频繁触发,节流能够减少事件触发的频率,因此,节流是有选择性的执行一部分事件

m0_63400611

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
节流阀以及案例

什么是节流节流策略,可以减少一段时间内时间的触发频率,直到上一个同样的事件结束才能重新触发节流的应用场景鼠标连续不断的触发某事件(如点击),在单位时间内只触发一次懒加载时要监听计算滚动条的位置,但不必每次滑动都触发,可以降低计算的频率,而不去浪费CPU资源节流阀的概念节流阀为空则可以执行下次操作,不为空则不能执行下次操作当前操作执行完,必须将节流阀重置为空,表示可以执行下次操作了每次执行操作前,必须先判断节流阀是否为空节流案例:鼠标跟随效果不使用节流实现鼠标跟随
复制链接

扫一扫