问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
阿森杂谈
    3821115

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

    javascripthtml5
    阅读 11.2k
    5 个回答
    得票最新
    头像
    manxisuo
      10.8k62136

      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

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

        头像
        free8rt
          3825

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

          头像
          慕少艾
            3.5k269
            <!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

            头像
            什么味道
              9116

              点击后就removeEventListener，动画完成后或者设定一段时间后再加上。

              查看全部 5 个回答
              推荐问题
              宣传栏