函数节流和函数防抖（附带demo）

最新推荐文章于 2022-07-17 03:05:39 发布

Ashley的成长之路

最新推荐文章于 2022-07-17 03:05:39 发布

阅读量522

点赞数

分类专栏：前端性能优化文章标签： js html5

本文链接：https://blog.csdn.net/weixin_40297452/article/details/104988416

版权

前端性能优化专栏收录该内容

5 篇文章 1 订阅

订阅专栏

1、函数节流：让一个函数在执行了一次之后，在规定时间内不会执行第二次。

比如说：有一个需要频繁触发的函数，处于性能优化的角度，让他在规定时间内只有第一次触发生效。

<!DOCTYPE html>
<html lang="zh">
<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>函数节流demo</title>
    <style>
        html,body { height: 800%;/* 要有足够高度去测试滚动 */}
    </style>
</head>
<body>
    <script>
        // @param fn 要被节流的函数
        // @param delay 规定时间
        function throttle(fn, delay) {
            var lastTime = 0;
            //使用闭包是为了避免lastTime每次都初始化
            return function() {
                //获取当前时间戳
                var nowTime = Date.now();
                if (nowTime - lastTime > delay) {
                    fn();
                    lastTime = nowTime; //记录最后一次执行时间
                }
            }
        }
        //用屏幕滚动测试函数节流
        document.onscroll = throttle(function() {
            console.log('触发滚动函数' + Date.now());
        }, 5000);
    </script>
</body>

</html>

函数节流结果：如下图，函数在规定时间内不会出现触发两次情况；

2、函数防抖：一个需要频繁触发的函数，在规定时间内，只让他的最后一次触发生效，前面的都不生效；

<!DOCTYPE html>
<html lang="zh">
<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>函数防抖demo</title>
</head>

<body>
    <button id='btn'>按钮</button>
    <script>
        // @param fn 要被节流的函数
        // @param delay 规定时间
        function debounce(fn, delay) {
            var timer = null;
            return function() {
                //清除上一次延时器
                clearTimeout(timer);
                timer = setTimeout(function() {
                    fn.apply(this); //解决this指向问题
                }, delay)
            }
        }
        document.getElementById('btn').onclick = debounce(function() {
            console.log('点击事件被触发 ' + Date.now());
        }, 500)
    </script>
</body>
</html>

函数防抖结果：如下图，即使在规定时间内点击了按钮很多次，函数也只会执行一次！就达到了防抖的效果

ps:学习过程的简单记录，若有不恰当之处，欢迎指正！

Ashley的成长之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
函数节流和函数防抖（附带demo）

1、函数节流：让一个函数在执行了一次之后，在规定时间内不会执行第二次。比如说：有一个需要频繁触发的函数，处于性能优化的角度，让他在规定时间内只有第一次触发生效。<!DOCTYPE html><html lang="zh"><head> <meta charset="utf-8"> <meta http-equ...
复制链接

扫一扫

专栏目录