防抖

最新推荐文章于 2023-04-01 09:42:52 发布

TishaQin

最新推荐文章于 2023-04-01 09:42:52 发布

阅读量225

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43623871/article/details/99411872

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

<!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>防抖</title>
</head>

<body>
    <input type="text" id="search">
    <button id="button"> 取消</button>

    <script>

        //1，这个功能就是一秒之后再没有输入什么东西就输出结果（先等再执行）
        // search.onkeyup = debounce(function (e) {
        //     console.log(this.value)
        //     console.log(e.target);
        // }, 1000);

        // function debounce(func, time) {
        //     var timer = null;
        //     return function () {
        //         // console.log(this);
        //         var _this = this;
        //         var _args = arguments;
        //         clearTimeout(time);
        //         timer = setTimeout(function () {
        //             func.apply(_this, _args);
        //         }, time);
        //     }
        // }



        // 2，现在我希望触发了就先执行，然后再等一秒。（先执行再等）只需要在上面的功能里加一个判断
        // search.oninput = debounce(function (e) {
        //     console.log(this.value)
        //     console.log(e.target);
        // }, 1000, true);

        // // flag为true表示先执行后等待，false为先等待再执行
        // function debounce(func, time, flag) {
        //     var timer = null;
        //     return function () {
        //         var _this = this;
        //         var _args = arguments;
        //         clearTimeout(time);
        //         if (flag) {
        //             if (!timer) func.apply(_this, _args);
        //             timer = setTimeout(function () {
        //                 timer = null;
        //             }, time);
        //         } else {
        //             timer = setTimeout(function () {
        //                 func.apply(_this, _args);
        //             }, time);
        //         }
        //     }
        // }


        // 3，我现在希望多个取消的功能，觉得计时器的时间太长了
        function cb(e) {
            console.log(this.value);
            console.log(e.target);
        }

        var setUseAction = debounce(cb, 2000);

        button.onclick = setUseAction.cancel;
        search.oninput = setUseAction;

        function debounce(func, time, flag) {
            var timer = null;
            var debounced = function () {
                var _this = this;
                var argu = arguments;
                clearTimeout(timer);
                if (flag) {
                    if (!timer) func.apply(_this, argu);
                    timer = setTimeout(function () {
                        timer = null;
                    }, time)
                } else {
                    timer = setTimeout(function () {
                        func.apply(_this, argu);
                    }, time)
                }
            }
            // 添加一个取消时间的方法
            debounced.cancel = function () {
                clearTimeout(timer);
                timer = null;
            }
            return debounced;
        }
    </script>
</body>

</html>