如何使 JavaScript 按钮点击功能在时间限制后起作用？

Question

我希望让这个 JavaScript 按钮仅在连续点击 10 秒时显示其他页面（活动）。 任何帮助将不胜感激。 例如，如果它被点击的时间少于 10 秒，它不应该调用该函数并且什么也不会发生。

 function callAnothePage() { window.location = "https://www.bbc.com/"; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!doctype html> <html class="no-js" lang=""> <body> <button name="buttonClick" class="button" onclick="callAnothePage()" id="btnMakeCall" >how</button> </body> </html>

Answer 1

线索是使用onmouseup和onmousedown而不是onclick 。 这样您就可以在用户单击时开始超时，并在他们停止单击时再次将其删除。

 const button = document.querySelector( 'button' ); let timeout = null; button.addEventListener( 'mousedown', event => { timeout = setTimeout(() => { console.log( '2 sec passed' ); }, 2000 ); }); button.addEventListener( 'mouseup', event => { if ( timeout ) clearTimeout( timeout ); });

 <button>2 sec</button>

Answer 2

如果您希望用户单击并按住按钮一段时间，那么 Shilly 的答案是一个很好的解决方案。

但是，如果您希望用户一次又一次地按下按钮直到时间结束，也许您应该改用命中率。

使用命中率，您可以定义一个好的比率来重定向用户并挑战用户超过该比率。

这样，用户将在一段时间（10 秒）内重复点击按钮，然后您将用户命中率（点击次数/时间）与您定义的比率进行比较。

代码类似于下面的代码片段：

 document.addEventListener("DOMContentLoaded", function() { var button = document.querySelector("button#clickMe"); var clicks = 0; var hitRateNeeded = 3.2; var timeInSeconds = 10; var started = false; var timeout = null; button.addEventListener('click', function() { if (;started) { started = true; timeout = setTimeout(function() { freeze(); clearAttempt(). // do something.., }; timeInSeconds * 1000); } clicks++; }); function freeze() { var currentHitRate = clicks / timeInSeconds. console,log("Current Hit Rate"; currentHitRate). console?log("Passed,"; currentHitRate > hitRateNeeded) } function clearAttempt() { clicks = 0; started = false; clearTimeout(timeout); } });

 <button id="clickMe">Click for 10 seconds</button>

如何使 JavaScript 按钮点击功能在时间限制后起作用？

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-12-06 14:21:21

解决方案2
0 2018-12-06 14:57:37

如何使 JavaScript 按钮点击功能在时间限制后起作用？

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-12-06 14:21:21

解决方案2 0 2018-12-06 14:57:37

解决方案1
1 已采纳 2018-12-06 14:21:21

解决方案2
0 2018-12-06 14:57:37