时间戳

首页 > 解决方案 > 带有计时器的 Javascript 或 Jquery 函数，每次调用时都会重置

javascript - 带有计时器的 Javascript 或 Jquery 函数，每次调用时都会重置

问题描述

我正在寻找一种方法来调用一个应该在执行前等待 1000 毫秒的函数。并且当在达到 1000 毫秒之前再次调用该函数时，计时器应该重新启动。这样该函数在最后一次调用后运行 1000 毫秒。

所以假设我有一个按钮：

<button type="button" id="btnclick">Click Me!</button>

我想在最后一次点击后正好 1000 毫秒后显示一个警报。但是当第二次单击按钮时，在 1000 毫秒过去之前，计时器应该重新启动。

这可能吗？如何？我最好的猜测是这样的：

function delay(callback, ms) {
    var timer = 0;
    return function () {
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            callback.apply(context, args);
        }, ms || 0);
    };
}

$('#btnclick').click(function(e){
    console.log('I want to see this everytime the button is clicked, without any delay');
    delay(waitFunction(),1000);
});


function waitFunction(){
    console.log('I want to see this 1 second after the LAST click');
}

（灵感来自：等待函数直到用户停止输入）

标签： javascriptjquerytimer

解决方案

对的，这是可能的。您只需要检查超时是否已经倒计时，如果是，请重置它。这是一个简单的例子。

// set timer-variable
var timer = null;

//on button-click
$('#btnclick').click (function (e) {

    //clear timeout if already applied
    if (timer) {
    
        clearTimeout (timer);
        timer = null;
    
    }
    
    //set new timeout
    timer = setTimeout (function () {
    
            //call wait-function and clear timeout
            waitFunction ();
            clearTimeout (timer);
            timer = null;
            
    }, 1000);
    
});

function waitFunction () {

    console.log ('I want to see this 1 second after the LAST click');
    
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="btnclick">Click Me!</button>

推荐阅读