javascript防抖第一次立即执行

东明兄 • 2019-01-03 • 开发笔记 • 12639 阅读
chat

防抖参考:https://blog.crazyming.com/note/691/

业务上有个需求就是 第一次点击按钮 的时候 立即执行,接下来的点击进行防抖处理,在debounce函数形参加一个 immediate 用来 表示 是否立即执行,函数里加一个count进行 计数,如果是第一次 并且immediate 为ture时立即执行.

代码如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input id="input" type="text" placeholder="输入文字防抖">
<button id="btn">第一次点击按钮立即执行 接下来 防抖</button>

<script>

    var input = document.getElementById('input');
    var btn = document.getElementById('btn');
    input.addEventListener('input', debounce(sayHi, 1000));
    btn.addEventListener('click', debounce(sayHi, 2000, true));

    function debounce(fn, wait, immediate) {
        immediate = immediate || false;
        var timer = null;
        var count = 0;
        return function () {
            var _this = this;
            var _arg = arguments;
            clearTimeout(timer);
            if (immediate && !count) {
                fn.apply(_this, _arg);
                count++;
            } else {
                timer = setTimeout(function () {
                    console.log(this);
                    fn.apply(_this, _arg);
                    count++;
                }, wait);
            }


        }

    }

    function sayHi(e) {
        console.log('防抖成功', e);
        console.log(this);
    }
</script>

</body>
</html>

版权声明：
作者：东明兄
链接：https://blog.crazyming.com/note/1020/
来源：CrazyMing
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
海报
javascript防抖第一次立即执行
第一次点击按钮 的时候 立即执行,接下来的点击进行防抖处理
<<上一篇
下一篇>>
chat