定時器結束時做點什么[JS]

我有一個計時器，我想在 div 元素的 textContent === 0 時做點什么；

JS：

function createTimer() {
        const display = document.createElement('div');
        display.classList.add('display');
        display.id = 'display';
        display.textContent = '5';

        return display;
    };

let intervalID;

function startTimer() {
        resetTimer();
        intervalID = setInterval(() => {
            let displayTimer = document.getElementById('display');
            let displayNumber = parseInt(displayTimer.textContent);
            if (displayTimer.textContent !== '0') displayTimer.textContent = displayNumber - 1;
        }, 1000);
    };

function resetTimer() {
        clearInterval(intervalID);
    };


function someFunc() {
    // here is a lot of code stuff and timer is working correctly
    const timer = createTimer();
};

這是我嘗試過的：

function someFunc() {
    const timer = createTimer();


    timer.addEventListener('input', () => {
            if (timer.textContent === '0') {
                console.log(true);
            };
        });
};

據我正確理解，通過在計時器上創建輸入事件，我總是在 timer.textContent 更改時得到它，對嗎？我跟蹤這個 div 元素中發生的所有變化。

什么都沒有發生。。我笨嗎？

uj5u.com熱心網友回復：

在 JavaScript 中將您的計數記錄為數字。這使得計數是什么以及如何操縱它變得清晰。

在setInterval回呼內部，檢查計數是否為0. 間隔已經存在并且將每秒運行一次，因此在那個地方檢查它是有意義的。

下面的示例是帶有建議實作的腳本的修改版本。由于您display要從函式中回傳元素，因此createTimer我決定在startTimer函式中重用它。這樣您就不必從 DOM 中選擇元素，因為您已經有了對該元素的參考。

作為獎勵，一個額外的引數可以是回呼函式，以便在計時器結束時執行某些操作。

let count = 5;
let intervalID;

function createTimer() {
  const display = document.createElement('div');
  display.classList.add('display');
  display.id = 'display';
  display.textContent = '5';
  return display;
};

function resetTimer() {
  clearInterval(intervalID);
};

function startTimer(timer, onFinish) {
  resetTimer();

  intervalID = setInterval(() => {
    if (count !== 0) {
      count--;
    }
    
    if (count === 0) {
      resetTimer();
      
      if (typeof onFinish === 'function') {
        onFinish();
      }
    }
    
    timer.textContent = count;
  }, 1000);
};


function someFunc() {
  const timer = createTimer();
  document.body.append(timer);

  startTimer(timer, () => {
    console.log('Done');
  });
};

someFunc();

uj5u.com熱心網友回復：

當用戶更改、 或元素的值時，將觸發<input>輸入事件。以編程方式設定時不會觸發。<select><textarea>textContent

您可以使用MutationObserver API 來觀察節點變化。

const timer = createTimer();
new MutationObserver(() => {
    let timer = document.getElementById('display');
    if (timer.textContent === '0') {
        console.log(true);
    };
}).observe(timer, { childList: true });

uj5u.com熱心網友回復：

您可以在 async/await 代碼的幫助下實作計時器。通過將開始和結束代碼放在同一個函式中，它使代碼更加簡潔。

const wait = ms => new Promise(resolve => setTimeout(resolve, ms));

function createTimer(name) {
  const element = document.createElement("div");
  element.classList.add("timer");
  document.body.appendChild(element);
  element.textContent = name ": -";
  return async function(seconds) {
    for (let second = seconds; second >= 0; second--) {
      element.textContent = name ": " second;
      if (second > 0) {
        await wait(1000);
      }
    }
  };
}

async function someFunc() {
  const timer = createTimer("First timer");
  console.log("first timer started", new Date());
  await timer(10);
  console.log("timer ended", new Date());
  await wait(2500);
  console.log("first timer started again", new Date());
  await timer(5);
  console.log("first timer ended again", new Date());
}
async function someOtherFunc() {
  const timer = createTimer("Second timer");
  console.log("second timer started", new Date());
  await timer(20);
  console.log("second timer ended", new Date());
}
someFunc();
someOtherFunc();

.timer {
  text-align: center;
  font-size: 2em;
  font-family: sans-serif;
}

標籤：javascripthtmldom设置间隔

上一篇：用于測量功能執行時間的計時器不起作用

下一篇：為什么querySelectorAll沒有選擇我的按鈕？[復制]