防抖和节流

龙眸

已于 2022-07-18 20:43:09 修改

阅读量903

点赞数

分类专栏：笔记文章标签： javascript html 前端

于 2022-07-18 20:36:19 首次发布

本文链接：https://blog.csdn.net/weixin_52065872/article/details/125859206

版权

笔记专栏收录该内容

73 篇文章 1 订阅

订阅专栏

一、防抖

1、什么是防抖？
防抖策略（debounce）是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。
2、防抖的应用场景
·用户在输入框中连续输入一串字符串，可以通过防抖策略，只在输入完成后，才能执行查询的请求，这样可以有效减少请求次数，节约请求资源。
3、防抖代码案例
详看上一篇文章，淘宝搜索框案例淘宝搜索框案例

二、节流

1、什么是节流？
节流策略（throttle）,顾名思义，可以减少一段时间内事件的触发频率
2、节流的应用场景？
①鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
②懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费CPU资源。
3、节流阀的概念：
节流阀为空，表示可以执行下次操作；不为空，表示不能执行下次操作；
当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作；
每次执行操作完，必须先判断节流阀是否为空。
4、节流代码案例
鼠标跟随效果代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #angel {
            position: absolute;
        }
    </style>
</head>

<body>
    <img src="./angel.gif" alt="" id="angel">
    <script>
        $(function() {
            // 获取图片元素
            var angel = $('#angel')
            // 1.预定义一个timer节流阀
            var timer = null
            // 监听文档的mousemove事件
            $(document).on('mousemove', function(e) {
                // 3.判断节流阀是否为空，如果不为空，则距离上次执行间隔不足16毫秒
                if (timer) { return }
                timer = setTimeout(function() {
                    // 设置图片的位置
                    $('#angel').css('left', e.pageX + 'px').css('top', e.pageY + 'px')
                    // 2.当设置了鼠标跟随效果后，清空timer节流阀，方便下次开启延时器
                    console.log('ok');
                    timer = null
                }, 16)

            })
        })
    </script>
</body>

</html>

在这里插入图片描述

三、总结防抖和节流的区别

防抖和节流的区别
①防抖：如果事件被频率触发，防抖能保证只有最后一次触发生效；前面N多次的触发都会被忽略；
②节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件；

龙眸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖和节流

防抖和节流的区别 ①防抖：如果事件被频率触发，防抖能保证只有最后一次触发生效；前面N多次的触发都会被忽略； ②节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件；......
复制链接

扫一扫

专栏目录