javascript防抖第一次立即执行

CrazyMing 2019-01-03
0条评论 240 次浏览
CrazyMing 2019-01-030条评论 240 次浏览

防抖参考:https://www.crazyming.cn/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>

4+

发表评论

电子邮件地址不会被公开。