jquery - 使用 jquery 计时事件执行

Question

如何计时 JQuery 函数或事件的执行？我不是指在超时后执行事件或函数。我想要类似的东西，在 20 秒内（而不是 20 秒后）捕获关键事件。我尝试了几个想法，但没有按照我想要的方式工作。

Answer 1

尝试

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    var timer = 0;

    $(function()
    {

        if(timer > -1 && timer <= 20)
        {
            timer = setTimeout(function()
            {
                timer = timer + 1;
                alert(timer);
            }, 1);
        }

    });

</script>

如果循环失败后，您可以unbind事件或任何您的要求。

Answer 2

您可以使用setInterval()

鉴于标记

<p>Interval: <span id="interval"></span></p>
<p>Counter: <span id="counter"></span></p>
<button id="start">Start</button>

你可以做这样的事情来捕捉keyups 20 秒

$(function(){
    var counter = 0;
    $("#start").click(function(){
        counter=0;
        var startTime = new Date().getTime() / 1000;

        $("body").on("keyup", function(){
            counter++;
            $("#counter").text(counter);
        });
        var intId = setInterval(function(){
            currentTime = new Date().getTime() / 1000;
            timeInterval = currentTime - startTime;
            $("#interval").text(timeInterval);
            if (timeInterval >= 20) {
                $("body").off("keyup");
                clearInterval(intId);
            }
        },1000);
    });
});

这是jsFiddle