設置事件內的延遲

Question

我的代碼-

hits.on('rowSelected', function (evt) {
    setTimeout(function() { alert('hi'); }, 5000); 
});

所以我有一個hits表。 在該表中選擇一行時，將觸發此事件。 問題是我希望5秒鍾不能再次選擇一行。 IMO，這不起作用，因為每次選擇一行時都會觸發表上的事件，而沒有給setTimeout時間延遲。

有沒有更好的辦法？

Answer 1

我建議使用變量來存儲是否已單擊元素。

在if條件中運行setTimeout() ，以檢查此變量。 單擊元素后，請更新變量，以使其不再被單擊。 然后，一旦超時解決，請再次啟用單擊。

可以在以下內容中看到：

 var hits = $("p"); var clickable = true; // It's clickable by default hits.on('click', function(evt) { if (clickable) { // Check whether it can be clicked clickable = false; // Once clicked, don't allow further clicks setTimeout(function() { alert('hi'); clickable = true; // Make it clickable again }, 5000); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Click this paragraph.</p> 

希望這可以幫助！ :)

Answer 2

下面是我能想到的最優雅的解決方案，使用一個按鈕來模擬行為。

其工作方式如下：

1. 將命名事件處理程序（ handler ）綁定到元素，並使用jQuery的one()僅執行一次。
2. 在事件處理程序中，處理事件。
3. 使用setTimeout()等待5秒鍾，然后重新綁定事件處理程序以進行下一次執行。

 let button = $('#button'); button.one('click', function handler() { console.log('clicked'); // handle event here setTimeout(() => $(this).one('click', handler), 5000); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button">Click me!</button> 

這種方法具有以下優點：

• 不需要外部變量來保存事件處理程序的狀態（即它是否處於活動狀態）。
• 不需要取消綁定事件處理程序，因為每次綁定僅用於一次執行。
• 不使用命名事件處理程序污染外部作用域。