[英]javascript interval with an ever longer time
我在按鈕上為 animation 編寫了代碼
cta.addEventListener("mouseover", () => {
setTimeout(() => {
audio.play()
audio.volume = .06;
imgs[0].style.transform = "translate(0, 0)";
setTimeout(() => {
imgs[2].style.transform = "translate(0, 0)";
}, 150);
setTimeout(() => {
imgs[1].style.transform = "translate(0, 0)";
}, 200);
setTimeout(() => {
imgs[5].style.transform = "translate(0, 0)";
}, 250);
setTimeout(() => {
imgs[3].style.transform = "translate(0, 0)";
}, 300);
setTimeout(() => {
imgs[4].style.transform = "translate(0, 0)";
}, 600);
}, 100);
});
但這不是很愉快。
如何改進此代碼? 只做一個 setInterval 並讓這個值隨着每次執行而增加??
稍微好一點的代碼版本:
cta.addEventListener("mouseover", () => {
setTimeout(() => {
audio.play()
audio.volume = .06;
imgs[0].style.transform = "translate(0, 0)";
transformImage(imgs[2], 150);
transformImage(imgs[1], 200);
transformImage(imgs[5], 250);
transformImage(imgs[3], 300);
transformImage(imgs[4], 600);
}, 100);
});
function transformImage(img, interval) {
setTimeout(() => {
img.style.transform = "translate(0, 0)";
}, interval);
}
進一步改進:
cta.addEventListener("mouseover", () => {
setTimeout(() => {
audio.play()
audio.volume = .06;
imgs[0].style.transform = "translate(0, 0)";
let offset = 150;
imgs.forEach(img => transformImage(img, offset+=50));
}, 100);
});
function transformImage(img, interval){
setTimeout(() => {
img.style.transform = "translate(0, 0)";
}, interval);
}
我能看到的唯一改進方法是使用 for 循環:
cta.addEventListener("mouseover", () => { setTimeout(() => { audio.play() audio.volume =.06; let times = [0, 200, 150, 300, 600, 250] times.forEach(function(let idx in times) { setTimeout(() => { imgs[idx].style.transform = "translate(0, 0)"; }, times[idx]); } }, 100);) });
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.