如何在 JavaScript 中“等待”而不阻塞（忙等待）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14845826/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to "wait" without blocking (busy wait) in JavaScript?
提问by
Hi I'm a Javascript Newbie. I've programmed a script which auto types a phrase on a page, pauses for a while, clears the div, auto types the next phrase and so on. It should continuously loop.
嗨，我是 Javascript 新手。我编写了一个脚本，它在页面上自动输入一个短语，暂停一段时间，清除 div，自动输入下一个短语等等。它应该不断循环。
I've found an issue when using a JavaScript wait() solution I found. When each phrase is in its pausing period, all other JavaScript is disabled on the page. I have researched and found that this is due to a blocking issue in JavaScript, as multi threads do not exist? Given my situation I have not been able to figure out a solution to allow the phrase to remain before being cleared, while also not resulting in blocking.
我在使用我找到的 JavaScript wait() 解决方案时发现了一个问题。当每个短语处于暂停期时，页面上的所有其他 JavaScript 都会被禁用。我研究并发现这是由于 JavaScript 中的阻塞问题，因为不存在多线程？鉴于我的情况，我无法找到一种解决方案，让该短语在被清除之前保留，同时也不会导致阻塞。
Below is my code. Any advice ?
下面是我的代码。有什么建议吗？
var index = 0;
var phrases = new Array();
//add a new variable to the array to add new phrases
phrases[0] = "Type the first phrase.";
phrases[1] = "Type the second...";
phrases[2] = "Type the third...";
var split_chars = phrases[index].split("");
function type_phrases()
{
if(split_chars.length > 0) {
document.getElementById('matrix_typer').innerHTML += split_chars.shift();
}
else {
clearTimeout(loopTimer);
wait(10000);//add a delay before the next phrase is typed
document.getElementById('matrix_typer').innerHTML = " ";
index += 1;
if(index >= phrases.length)
{
index = 0;
}
split_chars = phrases[index].split("");
}
loopTimer = setTimeout('type_phrases()',400);
}
function wait(ms) {
var start = +(new Date());
while (new Date() - start < ms);
}
采纳答案by itsid
use two functions and add another timeout instead of your delay function
使用两个函数并添加另一个超时而不是延迟函数
var phrases = new Array();
//add a new variable to the array to add new phrases
phrases[0] = "Type the first phrase.";
phrases[1] = "Type the second...";
phrases[2] = "Type the third...";
var index = 0;
var split_chars = phrases[index].split("");
function type_phrase()
{
document.getElementById('matrix_typer').innerHTML = " ";
split_chars = phrases[index].split("");
return type_char();
}
function type_char()
{
if(split_chars.length > 0)
{
document.getElementById('matrix_typer').innerHTML += split_chars.shift();
}
else
{
clearTimeout(charloopTimer);
phraseloopTimer = setTimeout('type_phrases()',1000); //set a timeout instead of a delay
index += 1;
if(index >= matrix_phrases.length)
index = 0;
}
charloopTimer = setTimeout('type_char()',400);
}
回答by Pascal Belloncle
use setTimeout
使用 setTimeout
setTimeout(function() {
// do something 1000ms later here.
}, 1000);
refer to JavaScript.setTimeout
