javascript - 如何在我的案例中创建计时器？

Question

我想让我的按钮做两件事。

初始化一个定时器来调用一个函数 调用相同的函数

我有类似下面的内容

test.prototype.setupEvent= function(){
        var instance = this;

      $('#btn').on('click', function(){
           clearInterval(instance.timer);
           this.showStuff()

           instance.timer=setInterval(function(){
              instance.showStuff()
           },10000);
        })
    }

test.prototype.showStuff= function(btnID){
        //jump to another page
    }

我的问题是，我希望用户在第一次单击它时能够在 10 秒后看到一些内容，但是，如果他们在 10 秒之前再次单击该按钮，他们也可以看到内容。我不确定如何通过单击事件区分两种不同的状态。谁能帮我吗？谢谢!

Answer 1

尝试

test.prototype.setupEvent = function () {
    var instance = this;

    $('#btn').on('click', function () {
        //if there is a timer running then clear the timer, show the content and delete the timer reference
        if (instance.timer) {
            clearInterval(instance.timer);
            instance.showStuff();
            delete instance.timer
            return;
        }
        //also you may want to use setTimeout() not setInverval()
        instance.timer = setInterval(function () {
            instance.showStuff();
            delete instance.timer
        }, 10000);
    })
}

test.prototype.showStuff = function (btnID) {
    //jump to another page
}