如何多次同时运行一个函数，将参数传递给具有相同类名的div

Question

我简化了代码以便于理解。我想运行一个动画函数，同时传递div ath的值。当我把它放在循环中时，我什么也做不了。间隔持续、错误消息等

如果这个输出工作正常，我必须看到它。

"30，60，90，1。拨号=>i： 0，val:60,2。拨号=>i： 0，val:60,3。拨号=>i： 0，val:90,1。拨号=>i： 1，价值：30，2。拨号=>i： 1，val:60,3。拨号=>i： 1，val:90,1。拨号=>i： 2，价值：30，2。拨号=>i： 2，val:60">

我已将视图更改为正确打印。：(

var result = document.querySelector(".result");
var dial = document.querySelectorAll('.dial');
var i = j = x = 0;
var val;
for (x = 0; x < dial.length; x++) {
secDiv = dial[x].querySelector('.itemContainer > .sq');
val = dial[x].querySelector('.itemContainer > span').getAttribute("per");
result.innerHTML += val + ", ";
//myInterval = setInterval(function() { cevir(x); }, 25);  // This is the line what I get errors  
}
myInterval = setInterval(function() {
cevir(1);
}, 25);
function cevir(m) {
dial = document.querySelectorAll('.dial');
var val = dial[m].querySelector('span').getAttribute("per");
result.innerHTML += "<br/> " + m + ". dial =>  i: " + i + ", val: " + val;
if (i < val) {
dial[m].querySelector('.sq').style.opacity = (i / 100);
dial[m].querySelector('.sq').style.transform = "rotate(" + (i * 2) + "deg)";
} else if (i == val) {
clearInterval(myInterval);
}
i++;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'exo 2', sans-serif;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #2ecc71, #16a085);
}
.dial {
position: relative;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 10px 0 10px;
}
.itemContainer {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: #fff;
}
.sq {
position: absolute;
background-color: red;
width: 70%;
height: 70%;
opacity: 0;
}
.result {
position: absolute;
top: 0px;
left: 0px;
padding: 5px;
//background-color : silver;
}

<div class="dial">
<div class="itemContainer">
<span per="30"></span>
<div class="sq">
</div>
</div>
</div>
<div class="dial">
<div class="itemContainer">
<span per="60"></span>
<div class="sq">
</div>
</div>
</div>
<div class="dial">
<div class="itemContainer">
<span per="90"></span>
<div class="sq"></div>
</div>
</div>
<div class="result"></div>

Answer 1

有几个错误。请参阅下面固定代码中的注释：

var result = document.querySelector(".result");
var dial = document.querySelectorAll('.dial');
var i = j = /*x =*/ 0; // <---------------- don't declare x here
var val;
//    🡓 declare it here
for (let x = 0; x < dial.length; x++) {
val = dial[x].querySelector('.itemContainer > span').getAttribute("per");
result.innerHTML += val + ", ";
// 🡓 declare your interval here       &     pass it here 🡓
const myInterval = setInterval(function() { cevir(x, myInterval); }, 25);
}
// so it is passed here 🡓
function cevir(m, myInterval) {
dial = document.querySelectorAll('.dial');
var val = dial[m].querySelector('span').getAttribute("per");
result.innerHTML += "<br/> " + m + ". dial =>  i: " + i + ", val: " + val;
if (i < val) {
dial[m].querySelector('.sq').style.opacity = (i / 100);
dial[m].querySelector('.sq').style.transform = "rotate(" + (i * 2) + "deg)";
} else if (i == val) {
// And accessible here 🡓
clearInterval(myInterval);
}
i++;
}

<!-- Unchanged HTML & CSS -->                                                                                                                                               <div class="dial"><div class="itemContainer"> <span per="30"></span><div class="sq"></div></div></div><div class="dial"><div class="itemContainer"> <span per="60"></span><div class="sq"></div></div></div><div class="dial"><div class="itemContainer"> <span per="90"></span><div class="sq"></div></div></div><div class="result"></div><style>*{margin:0;padding:0;box-sizing:border-box;font-family:'exo 2',sans-serif}body{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(45deg,#2ecc71,#16a085)}.dial{position:relative;width:100px;height:100px;display:flex;justify-content:center;align-items:center;margin:0 10px 0 10px}.itemContainer{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#fff}.sq{position:absolute;background-color:red;width:70%;height:70%;opacity:0}.result{position:absolute;top:0;left:0;padding:5px}</style>

Answer 2

您可以在cevir函数中声明间隔。如果你想打印：

0. 拨号=>i： 0，val:30
1. 拨号=>i： 0，val:60
2. 拨号=>i： 0，val:90
3. 拨号=>i： 1，val:30
4. 拨号=>i： 1，val:60
5. 拨号=>i： 1，val:90

您需要在cevir函数内创建一个for...loop，并将i变量移动到函数范围：

const result = document.querySelector(".result");
const dial = document.querySelectorAll(".dial");
for (let x = 0; x < dial.length; x++) {
cevir(x);
}

async function cevir(m) {
const myInterval = setInterval(function() {
const val = dial[m].querySelector("span").getAttribute("per");
[...Array(Number(val))].forEach((_, i) => {
const update = () => {
result.innerHTML += "<br/> " + m + ". dial =>  i: " + i + ", val: " + val;
dial[m].querySelector(".sq").style.opacity = i / 100;
dial[m].querySelector(".sq").style.transform = "rotate(" + i * 2 + "deg)";
}
await (update, i * 10);
});
clearInterval(myInterval);
}, 25);
}
const await = (fn, t) => new Promise((resolve) => setTimeout(() => {
fn();
resolve()
}, t));

*{margin:0;padding:0;box-sizing:border-box;font-family:'exo 2',sans-serif}body{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(45deg,#2ecc71,#16a085)}.dial{position:relative;width:100px;height:100px;display:flex;justify-content:center;align-items:center;margin:0 10px 0 10px}.itemContainer{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#fff}.sq{position:absolute;background-color:red;width:70%;height:70%;opacity:0}.result{position:absolute;top:0;left:0;padding:5px}

<!-- Unchanged HTML & CSS --> <div class="dial"> <div class="itemContainer"> <span per="30"></span> <div class="sq"> </div> </div></div><div class="dial"> <div class="itemContainer"> <span per="60"></span> <div class="sq"> </div> </div></div><div class="dial"> <div class="itemContainer"> <span per="90"></span> <div class="sq"></div> </div></div><div class="result"></div>