防抖与节流

投时

已于 2022-02-21 21:43:46 修改

阅读量249

点赞数

分类专栏： js 文章标签： javascript

于 2022-02-19 23:40:56 首次发布

本文链接：https://blog.csdn.net/gxll499294075/article/details/122994771

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、防抖

防抖：用户触发时间过于频繁，只要最后一次事件的操作。

oninput : 文本框点击输入事件，输入即触发。

<body>
    <input type="text">
    <script>
        // 防抖：用户触发时间过于频繁，只要最后一次事件的操作。
        let inp = document.querySelector("input");
        let t = null;
        inp.oninput = function () {
            if (t !== null) {
                clearTimeout(t);
            }
            t = setTimeout(() => {
                console.log(this.value);
            }, 500);
        }
    </script>
</body>

这种写法容易将业务代码和逻辑功能代码混合，不容易理解。可以优化为以下方法。

// 防抖：用户触发时间过于频繁，只要最后一次事件的操作。
        let inp = document.querySelector("input");
        // 可以将功能代码封装成一个函数
        // oninput 事件需要一个函数，即：封装的功能函数必须返回一个函数
        inp.oninput = debounce(function () {
            console.log(this.value);
        }, 500);

        function debounce(fn, delay) {
            let t = null;
            return function () {
                if (t !== null) {
                    clearTimeout(t);
                }
                t = setTimeout(() => {
                    fn.call(this);
                }, delay);
            }
        }

将业务代码和功能代码实现分离，不影响阅读性。

二、节流

节流：控制执行次数

在高频操作中，限制事件的触发次数。（如滚动条的事件，操作过于频繁时，可以采取节流方式限制操作次数）。

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

<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>Document</title>
    <style>
        body {
            height: 2000px;
        }
    </style>
</head>

<body>
    <script>
        // 节流:控制执行次数
        window.onscroll = throttle(function () {
            console.log("123");
        }, 500);

        function throttle(fn, delay) {
            let flag = true;
            return function () {
                if (flag) {
                    setTimeout(() => {
                        fn.call(this);
                        flag = true;
                    }, delay);
                }
                flag = false;
            }
        }
    </script>
</body>

</html>