亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

為什么 setTimeout 用于 Javascript 中的計數器動畫?

為什么 setTimeout 用于 Javascript 中的計數器動畫?

米脂 2022-06-16 10:04:18
我試圖找到這個問題的答案,但在任何地方都找不到。這里我有我的動畫代碼:let counters = document.querySelectorAll('.counter');   counters.forEach(counter => {       counter.innerText = 0;       let target = +counter.dataset.count;       let step = 1;    let countIt = function () {        let displayedCount = +counter.innerText; // 0        if(displayedCount < target) {            counter.innerText = displayedCount + step;            setTimeout(countIt, 1);            // countIt(); // here if i call countIt directly then my counter animation does not work.                           //but with setTimeout it works.        } else {            counter.innerText = target;        }    }    countIt();   })所以我的問題是為什么會這樣?任何人都可以解釋一下引擎蓋下發生了什么?
查看完整描述

1 回答

?
jeck貓

TA貢獻1909條經驗 獲得超7個贊

當 JavaScript 代碼在主 JavaScript 線程上運行時,瀏覽器不會重新繪制頁面。通過直接調用countIt,您將在同一個 JavaScript 作業中進行所有更新,然后瀏覽器在完成后重新繪制頁面。通過使用setTimeout,您可以將更新分成多個間隔大約1 毫秒的 JavaScript 作業,因此瀏覽器有機會在它們之間重新繪制。

您可以在HTML 規范的Event Loops部分和 JavaScript 規范的Jobs and Host Operations to Enqueue Jobs部分找到詳細信息。它們使用的術語略有不同:JavaScript“腳本作業”主要是 HTML“任務”,而 JavaScript“承諾作業”是一種 HTML“微任務”。

您可能還對 感興趣requestAnimationFrame,它提供了一種在重新繪制頁面之前請求回調的方法?,F在,您的計數器在重繪之間會更新多次,通常大約每 16.667 毫秒發生一次。所以瀏覽器不會繪制你在 counter DOM 元素中輸入的每一個值。


查看完整回答
反對 回復 2022-06-16
  • 1 回答
  • 0 關注
  • 140 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號