如何多次同时运行一个函数，将参数传递给具有相同类名的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，val: 30，2.拨号=> i: 1，val: 60，3.拨号=> i: 1，val: 90，1.拨号=> i: 2，val: 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函数中声明时间间隔。另外，如果您想要打印：

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

dial => 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>

​