清除对象方法内部的间隔

Question

此代码是游戏的一部分，用户有一定的时间输入答案。

如果用户决定在分配的时间结束前提交答案，我希望能够从对象外部清除间隔。

我尝试返回带有 ID 的间隔，以便稍后调用它，虽然这确实允许我从对象外部清除它，但这意味着间隔函数中的代码永远不会运行.

const clock = {
    timer: 30,
    countdown() {
        let interval = setInterval(function () {
            selectors.timerDisplay.textContent = clock.timer
            clock.timer--
            if (clock.timer < 0) {
                clearInterval(interval)
                selectors.wordSubmit.click();
            }
        }, 1000)
    },
}

我很感激我可能只是为了清除这个间隔而简单地设置了自己，因此我将不胜感激任何关于如何改进它的建议。

提前致谢。

Answer 1

您可以使用箭头函数来利用对象 clock

this

添加一个方法，即 clear。
使用 this 上下文来引用您的内部属性。

const clock = {

    timer: 3,
    interval: 0,
    
    reset() {
      this.timer = 3;
      this.interval = 0;
    },
    
    clear() {      
      clearInterval(this.interval);
      this.reset();
    },
    
    countdown() {
        this.interval = setInterval(() => {
            //selectors.timerDisplay.textContent = clock.timer
            this.timer--;
            console.log(this.timer)
            if (this.timer < 0) {                
                clearInterval(this.interval)
                //selectors.wordSubmit.click();
            }
        }, 1000);
    },
}

clock.countdown();
setTimeout(function() {
  clock.clear();
}, 1500)

看到了吗？间隔函数在 1.5 秒后结束

Answer 2

你可以暴露一个清除间隔的方法

const selectors = document.querySelector('div');
const clearTimer = document.querySelector('button');
const clock = {
    timer: 5,
    // Initiate the interval
    int: null,
    // This exposes a way to clear the interval outside of the object
    clearTimer() {
      clearInterval(this.int);
    },
    countdown() {
        // This is where you define this.int
        this.int = setInterval(() => {
            //selectors.timerDisplay.textContent = clock.timer
            selectors.innerText = clock.timer.toString();
            clock.timer--
            console.log(clock.timer);
            if (clock.timer < 0) {
                this.clearTimer();
                //selectors.wordSubmit.click();
            }
        }, 1000)
    },
}

clock.countdown();
clearTimer.addEventListener('click', () => {
  clock.clearTimer();
})

<div>clock.timer</div> 
<button>clear timer</button>

Answer 3

与一样，只需 return interval 即可稍后停止。例如

countdown() {
    let interval = setInterval(function () {
        selectors.timerDisplay.textContent = clock.timer
        clock.timer--
        if (clock.timer < 0) {
            clearInterval(interval)
            selectors.wordSubmit.click();
        }
    }, 1000)
    return interval // added this line
},

然后，消费者可以在需要时取消间隔

const interval = clock.countdown()

// and later...

clearInterval(interval)

清除对象方法内部的间隔

Clear interval inside object method

javascript

object

setinterval

clearinterval