规则:
<progress>
元素。问题:
如果快速单击,它将仅使最后一个progress
栏成为动画。动画应该一一出现直到完成。
问题:
快速单击时,为什么动画混乱?
HTML:
<div class="container">
<div class="add-progress-container">
<input class="input-seconds" type="number" min="1" max="10" value="1">
<button class="add-progress">Add progress</button>
</div>
<div class="progress-container"></div>
</div>
JS:
const container = document.querySelector('.progress-container');
const inputSeconds = document.querySelector('.input-seconds');
const addBtn = document.querySelector('.add-progress');
let animating = false;
function animateProgress(duration, el) {
const intervalId = setInterval(() => {
if(el.value >= el.max) {
animating = false;
window.clearInterval(intervalId);
console.log('finished');
checkQueue();
return;
}
el.value += el.max/duration;
}, 1000);
}
function getSeconds() {
return parseInt(inputSeconds.value, 10);
}
let progressCount = 0;
function createProgress() {
const template = `<progress data-progress="${progressCount}" value="0" max="100"></progress>`;
container.innerHTML += template;
const el = document.querySelector(`[data-progress="${progressCount}"]`);
progressCount++;
return el;
}
let queue = [];
function addProgress() {
const el = createProgress()
queue.push(el);
checkQueue();
}
function checkQueue() {
if(queue.length && !animating) {
animating = true;
animateProgress(getSeconds(), queue.shift());
}
}
addBtn.addEventListener('click', addProgress);
答案 0 :(得分:2)
innerHTML+=
分配将重新创建container元素中的所有先前元素,这意味着您对其他progress
元素的引用不再是此分配创建的实际元素。
您应该添加一个新的进度元素,如下所示:
function createProgress() {
const el = document.createElement("progress");
el.setAttribute("data-progress", progressCount);
el.setAttribute("value", 0);
el.setAttribute("max", 100);
container.appendChild(el);
return el;
}
正如Makyuu在下面评论的那样,仅在它们的动画开始时才对单个进度元素采取步骤数。这意味着,如果您更改输入值,则它也将应用于先前创建的元素(当它们尚未开始设置动画时)。
如果打算使用创建元素时指示的步骤数,请在代码中修改两行:
queue.push([getSeconds(), el]);
和:
animateProgress(...queue.shift());