Question

我有四个不同的按钮效果，每个效果都在变量中声明。

因此，我将所有这四个变量都放入一个名为arr的数组中，该数组在clickByItself()函数中使用Math.floor(Math.random())方法使用。

在没有for循环的情况下，每次我重新加载页面时，代码都会自动随机单击四个按钮之一。

function clickByItself() {
   let random = Math.floor(Math.random() * arr.length);
   $(arr[random]).click();
}

但是，使用for循环，我无法在最多10次之内一对一地进行这些点击。

var blueButtonEffect = code effect here;
var redButtonEffect = code effect here;
var greenButtonEffect = code effect here;
var yellowButtonEffect = code effect here;
var arr = [blueButtonEffect, redButtonEffect, greenButtonEffect, yellowButtonEffect];

//will click on buttons randomly
function clickByItself() {
    let random = Math.floor(Math.random() * arr.length)
    var i;
    for (i = 0; i < 10; i++) {
        $(arr[random]).click();
        setTimeout(clickByItself(), 1000);
    }
}

上面带有当前代码的最终输出是同时单击四个按钮，而不是一个一个地单击。

那么，我该如何利用此功能在每次单击时以一秒钟的间隔一键一按10次呢？

Answer 1

要修复代码，您需要：

递归的基本情况
将函数引用传递给setTimeout。当前，您正在执行clickByItself，并将其返回值（未定义）传递给setTimeout。
请勿在不将时间增加i的情况下在循环中使用setTimeout，因为for循环会将所有函数调用同时排队
或者，您可以使用“ times”参数来避免循环

您可以尝试类似

function clickByItself(times = 0) {
  let random = Math.floor(Math.random() * arr.length)
  $(arr[random]).click();
  if (++times < 10) {
    setTimeout(function(){clickByItself(times);}, 1000);
  }
}

带有控制台日志的示例 https://jsfiddle.net/pfsrLwh3/

Answer 2

常见错误，setTimeout仅需要接收引用才能进一步执行。您正在立即执行clickByItself

  function clickByItself() {
let random = Math.floor(Math.random() * arr.length)
var i;
for (i = 0; i < 10; i++) {
  $(arr[random]).click();
  setTimeout(clickByItself, 1000);
}
}

Answer 3

问题是for循环非常快地调用setTimeout 10次。如果要等到上一个函数调用完成之后再调用下一个函数，则应使用递归或仅使用setInterval。

递归：

function clickByItself(numIterations) {
    let random = Math.floor(Math.random() * arr.length)
    let i;

    $(arr[random]).click();

    if( numIterations < 10 ){
        setTimeout(() => {
            clickByItself(numIterations += 1)
        }, 1000) 
  }      
}

clickByItself(0);

使用setInterval

let numIterations = 0;

function clickByItself() {
    let random = Math.floor(Math.random() * arr.length);
    let i;
    $(arr[random]).click();

    numIterations += 1;

    if( numIterations > 10) {
        clearInterval(loop)
    }
}

let loop = setInterval(test2, 1000);

Answer 4

您是说这仅工作了4次，但我认为您的上述代码将在无限循环中运行，因为您在for循环中再次调用clickByItself（）。

如果您想一次随机按下按钮10次，每次点击间隔一秒，则将for循环替换为

for (i = 0; i < 10; i++) {
      setTimeout($(arr[random]).click(), 1000);
    }

如何在JavaScript中循环执行功能

4 个答案: