javascript - 快速调用后仅调用一次函数

Question

我有一个用户可以点击的搜索按钮。

这个搜索按钮调用一个函数。我想避免当用户点击搜索按钮两次或更多次时(因为他认为什么都没有发生)，该功能被执行多次。

我正在考虑以某种方式使用 setTimeout(function(){}) 并且最后只在按钮的点击距离上次点击至少 3 秒时再次调用搜索函数.

示例:https://jsfiddle.net/n1rcre75/ - 我希望能够连续点击按钮两次(1 秒后)，但执行函数只运行一次

有什么想法吗？

Answer 1

守卫搜索:

var button = document.getElementById('search');
var runSearch = true;

button.addEventListener('click', function(evt) {
        evt.preventDefault();

        if(!runSearch){
                return;
        }

        console.log('do search');

        runSearch = false;          
        setTimeout(function(){
                runSearch = true;
        }, 3000);
});

或者，如果您不想向作用域引入另一个变量:

document.getElementById('search').addEventListener('click', (function() {
        var runSearch = true;

        return function(evt)  {
                evt.preventDefault();

                if(!runSearch){
                        return;
                }

                runSearch = false;
                console.log('do search');

                setTimeout(function(){
                        runSearch = true;
                }, 3000);
        }
})());