js 函数节流throttle 函数去抖debounce

最新推荐文章于 2024-05-25 22:13:30 发布

qq_45670012

最新推荐文章于 2024-05-25 22:13:30 发布

阅读量77

点赞数

分类专栏：前端文章标签： javascript js 函数节流 throttle 函数去抖 debounce

原文链接：https://www.mk2048.com/blog/blog.php?id=hikjkih2j0cb&title=js+%E5%87%BD%E6%95%B0%E8%8A%82%E6%B5%81throttle+%E5%87%BD%E6%95%B0%E5%8E%BB%E6%8A%96debounce

版权

前端专栏收录该内容

1223 篇文章 6 订阅

订阅专栏

1、函数节流throttle

通俗解释：

假设你正在乘电梯上楼，当电梯门关闭之前发现有人也要乘电梯，礼貌起见，你会按下开门开关，然后等他进电梯；但是，你是个没耐心的人，你最多只会等待电梯停留一分钟； 在这一分钟内，你会开门让别人进来，但是过了一分钟之后，你就会关门，让电梯上楼。

所以throttle的作用是，预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新的时间周期。

应用：在指定时间，事件最多触发一次。

2、函数去抖debounce

假设你正在乘电梯上楼，当电梯门关闭之前发现有人也要乘电梯，礼貌起见，你会按下开门开关，然后等他进电梯； 如果在电梯门关闭之前，又有人来了，你会继续开门； 这样一直进行下去，你可能需要等待几分钟，最终没人进电梯了，才会关闭电梯门，然后上楼。

所以debounce的作用是，当调用动作触发一段时间后，才会执行该动作，若在这段时间间隔内又调用此动作则将重新计算时间间隔。

应用：百度首页的搜索按钮。

3、函数节流与函数去抖实现

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

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>函数节流与函数去抖</title>
    </head>

    <body>
        <button type='button' id="btn">函数节流</button>
        <script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>
        <script type="text/javascript">
            const btn = document.getElementById('btn');
            //函数去抖
            function debounce(fn, delay) {
                var timer = null;
                return function(...args) {
                    clearTimeout(timer);
                    timer = setTimeout(() => fn.apply(this, args), delay);
                }
            }

            //函数节流
            function throttle(fn, wait) {
                var timer;
                return function(...args) {
                    if(!timer) {
                        timer = setTimeout(() => timer = null, wait);
                        return fn.apply(this, args);
                    }
                }
            }

            btn.onclick = debounce(function() {
                console.log("clicked");
            }, 300);

            //按钮每500ms一次点击有效
            btn.onclick = throttle(function() {
                console.log("button clicked");
            }, 500);
        </script>
    </body>

</html>

更多专业前端知识，请上【猿2048】www.mk2048.com

qq_45670012

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 函数节流throttle 函数去抖debounce

1、函数节流throttle 通俗解释：假设你正在乘电梯上楼，当电梯门关闭之前发现有人也要乘电梯，礼貌起见，你会按下开门开关，然后等他进电梯；但是，你是个没耐心的人，你最多只会等待电梯停留一分钟；...
复制链接

扫一扫