for循环内的setTimeout行为不符合预期

Question

我正在创建一个函数，当您按下一个按钮时，它会一次弹出一个随机的符号，中间会延迟一段时间，然后在所有符号加载完毕后变为一个可读的单词。 我不能耽误工作时间。 我还没有添加将符号转换为可读单词的部分，因为我无法完成此操作。

//Brute Force
function work() {
    setTimeout(function() {
        var $rand = Math.ceil(Math.random() * 10);
        $('#txtBrute').append($sym[$rand]);
    },1000);
};
var i = 1;
var $sym = [1,9,"%","$",")",">","@","?","-","|",7];
$('#btnBrute').click(function() {
    var $pass = "password123";
    $('#txtBrute').html("");
    for(i = 1; i <= $pass.length; i++) {
        work();
    };
});

Answer 1

问题是因为您正在循环调用work() ，所以所有计时器都会立即执行。

代替此，您可以使work()递归。 您可以将密码的长度用作每次递归的递减值。 尝试这个：

 var timeout; var $sym = [1, 9, "%", "$", ")", ">", "@", "?", "-", "|", 7]; function work(length) { timeout = setTimeout(function() { var $rand = Math.ceil(Math.random() * 10); $('#txtBrute').append($sym[$rand]); --length != 0 && work(length); }, 1000); }; $('#btnBrute').click(function() { clearTimeout(timeout); var pass = "password123"; $('#txtBrute').html(""); work(pass.length); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btnBrute">Go</button> <div id="txtBrute"></div> 

还要注意，如果有人决定在递归循环仍在运行时继续按下按钮，则我添加了clearTimeout()调用。

Answer 2

setTimeout()不会影响其余代码的运行时间，因此循环会立即启动所有超时。 结果，它们都在1000毫秒后立即被调用。 罗里的答案建议使work()递归； 解决此问题的另一种方法（可能更易于实现，但不易使用）将延迟量传递给work() ：

 function work(delay) { setTimeout(function() { var $rand = Math.ceil(Math.random() * 10); $('#txtBrute').append($sym[$rand]); }, delay); }; var i = 1; var $sym = [1,9,"%","$",")",">","@","?","-","|",7]; $('#btnBrute').click(function() { var $pass = "password123"; $('#txtBrute').html(""); for(i = 1; i <= $pass.length; i++) { work(i * 1000); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btnBrute">Go</button> <pre id="txtBrute"></pre>