forループ内のsetTimeoutが期待どおりに動作しない

Question

私は、ボタンを押すたびに一度に1つずつランダムなシンボルをポップアップし、すべてのシンボルが読み込まれると読み込み可能な単語に変化するという関数を作成しています。遅れて働くことはできません。私はこれを終えることができないので、記号を読みやすい言葉に変える部分を加えました。

//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ミリ秒後に一度に呼び出されます。 Roryの答えは、work()を再帰的にすることを示唆しています。実装がおそらく容易しかしとして使用できないこの問題を解決する別の方法、あろう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>