Question

我有这段代码，单击所有按钮一次..我想要的是在单击每个按钮后有1秒的小延迟..所以不是真的一次，而是一个接一个....直到全部按钮被点击！

代码如下：

var inputs = document.getElementsByClassName('xxxxxxxx'); 

for (var i=0; i<inputs.length;i++) 
{ 
    inputs[i].click(); 
}

Answer 1

使用setTimeout（）

在代码的第三行中添加设置超时，如下所示，以每秒单击一次。另外，使用let代替var使其起作用：

var inputs = document.getElementsByClassName('xxxxxxxx'); 

for (let i=0; i<inputs.length;i++) // Use let not var to declare i
{ 
    setTimeout(inputs[i].click, i*1000);  // <<<<<< Here
}

Answer 2

假设允许使用ES6，则可以在地图上一行：

const inputs = document.getElementsByClassName('xxx');
const clickButton = (btn) => btn.value = 'Clicked'

Array.from(inputs).map((x, i) => setTimeout(() => clickButton(x), i * 2000))

<input type="submit" class="xxx" onclick="log()" />
<input type="submit" class="xxx" onclick="log()" />
<input type="submit" class="xxx" onclick="log()" />

Answer 3

您可以使用递归而不是for循环，并在函数中包含超时。示例：

const inputs = document.getElementsByClassName('button'); 

const logClicked = () => console.log('clicked')

const checkTheBox = (arr,pos) => {
  if (pos < arr.length) {
    arr[pos].click()
    arr[pos].style.background = 'red'
    setTimeout(() => checkTheBox(arr, pos+1), 1000)
  }
  return
}

checkTheBox(inputs, 0)

.button {
  border:1px solid black;
  background: white;
}

<div class="wrapper">
  <input type="submit" class="button" onclick="logClicked()" />
  <input type="submit" class="button" onclick="logClicked()"/>
  <input type="submit" class="button" onclick="logClicked()"/>
  <input type="submit" class="button" onclick="logClicked()"/>
  <input type="submit" class="button" onclick="logClicked()"/>
  <input type="submit" class="button" onclick="logClicked()"/>
  <input type="submit" class="button" onclick="logClicked()"/>
</div>

如何一次又一次单击页面上的所有按钮？

3 个答案: