JS限制点击事件的频率怎么实现

阿森杂谈

3821115

发布于
2016-06-28

做的图像旋转的效果，但是连续点击，图像就混乱啦，所以想限制点击事件的频率或者是不允许连续点击

javascript

html5

阅读 11.2k

5 个回答

manxisuo

Underscore 中有个方法：_.throttle就是做这件事情的。你可以直接用它或者参考一下它的实现。

写了一个简易版的，大概是这样：

function throttle(fn, period) {
    var bingo = true, timer = -1;
    return function() {
        if (bingo) {
            var args = Array.prototype.slice.call(arguments, 0);
            var ret = fn.call(this, args);
            bingo = false;
            clearTimeout(timer);
            timer = setTimeout(function() {
                bingo = true;
            }, period);
            return ret;
        }
    }
}

思想就是将一个函数包装成一个新函数，新函数内置一个计时器，用来控制原函数的调用频率。

这是上帝的杰作

2.2k212

发布于
2016-06-28

我的思路:
旋轉后，先禁止點擊事件，return false,
旋轉操作完成后再return false。
這樣就可以繼續點擊了。

free8rt

3825

发布于
2016-06-28

这个简单，先定义好事件函数，给按钮one一次事件，当用户出发事件函数执行到最后再one一次，也就是每次只绑一次，只有触发当前事件并执行完后才会绑下一次事件

慕少艾

3.5k269

发布于
2016-06-28

更新于
2016-06-28

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

<head>
    <meta charset="UTF-8">
    <title>throttle</title>
</head>

<body>
    <div id='demo' style='height:100px;width:200px;border:1px solid #ff0'></div>
    <button id='btn'>按钮</button>
    <script>
    var COUNT = 0,
        demo = document.getElementById('demo');

    function testFn() {
        demo.innerHTML += 'testFN 被调用了 ' + ++COUNT + '次<br>';
    }

    var throttle = function(fn, delay, atleast) {
        var timer = null;
        var previous = null;
        return function() {
            var now = +new Date();

            if (!previous) previous = now;
            if (atleast && now - previous > atleast) {
                fn();
                // 重置上一次开始时间为本次结束时间
                previous = now;
                clearTimeout(timer);
            } else {
                clearTimeout(timer);
                timer = setTimeout(function() {
                    fn();
                    previous = null;
                }, delay);
            }
        }
    };

    document.getElementById('btn').onclick = throttle(testFn, 500, 1000);
    </script>
</body>

</html>

参照文章区：
https://segmentfault.com/a/1190000005803785