Как включить функцию нажатия кнопки JavaScript для работы после определенного срока? - PullRequest
0 голосов
/ 06 декабря 2018

Я хочу разрешить этой кнопке 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>

Ответы [ 2 ]

0 голосов
/ 06 декабря 2018

Если вы хотите, чтобы пользователь нажимал и удерживал кнопку в течение некоторого времени, ответ Шилли является хорошим решением.

Но если вы хотите, чтобы пользователь нажимал кнопку снова и снова до истечения времени,возможно, вам следует вместо этого использовать коэффициент попадания.

С коэффициентом попадания вы можете определить хорошее соотношение, чтобы перенаправить пользователя и попросить пользователя перейти на коэффициент.

Таким образом, пользователь будет нажиматьнажимайте кнопку в течение некоторого периода времени (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>
0 голосов
/ 06 декабря 2018

Ключ должен использовать 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...