javascript，while循环

Question

我试图让我的脚本在继续之前等待用户输入（单击按钮），这在其他语言中是可行的，但在 js 中似乎是不可能的。基本上，我希望用户在给定的时间范围内选择一个选项，如果用户选择了错误的选项，他们会被告知..script 然后继续...否则，如果在一定时间后没有响应.. .script 只是继续再次播下正确的答案，但 js 中似乎没有任何内容可以让脚本等待该用户输入！我尝试了一个while循环，但这只是js中的一个很大的不，我使用了settimeout但没有真正的效果，因为脚本只是像正常一样继续然后在x时间后执行一个动作，我尝试设置变量并让脚本仅当它具有特定值时才继续，该值仅在用户单击时设置...例如 varproceed=false，仅在用户单击按钮时才设置为 true，但它仍然不起作用...我尝试了很多其他解决方案，但实际上似乎没有任何效果。我喜欢while循环的想法，因为它完全符合我的要求，但是如果完全冻结我的浏览器，是否有更有效的循环类型会以与我的浏览器崩溃相同的方式执行？

下面是我的代码，它完全冻结了我的计算机。这个方法在一个 for 循环中被调用，在它之后调用另一个方法。

function getUserResp(){
    $("#countdown").countdown({seconds: 15});
    setTimeout("proceed=true", 16000);

    $("#ans1").click(function(){
        ansStr=$(this).text();
        checkAns(ansStr);
     });    
    $("#ans2").click(function(){
        ansStr=$(this).text();
        checkAns(ansStr);
    });    
    $("#ans3").click(function(){
        ansStr=$(this).text();
        checkAns(ansStr);
        });

想要这样的东西.....或者只是某种循环让脚本在继续之前等待，所以至少它给了用户一些时间来响应而不是直接运行！

    do{
    $(".ans").mouseover(function(){
        $(this).addClass("hilite").fadeIn(800);
        });  

    $(".ans").mouseout(function(){
        $(this).removeClass("hilite");
        });

    }while(proceed==false);

}

Answer 1

你做错了。

浏览器中的 JavaScript 使用事件驱动模型。没有main 函数，只有在事件发生时调用的回调（例如文档准备好或单击锚点）。如果您希望在用户单击某些内容后发生某些事情，那么请在该内容上放置一个侦听器。

您所做的只是在每次循环中不断添加一个事件侦听器。

如果您想等待用户输入，那么什么都不做 - 浏览器等待用户输入（它有一个内部事件循环）。您能做的最糟糕的事情是尝试在浏览器之上重新实现自己的事件循环。

您需要learn JavaScript。像其他语言一样尝试编写 JavaScript 只会导致痛苦和痛苦。认真的。

Douglas Crockford said it best:

JavaScript 是一种大多数人在使用之前都不会费心去学习的语言。你不能用任何其他语言做到这一点，你不应该这样做，你也不应该用这种语言这样做。编程是一门严肃的事情，你应该对自己在做什么有充分的了解，但大多数人认为他们应该能够在没有任何知识的情况下用这种语言编程，而且它仍然有效。这是因为语言具有强大的表达能力，这不是偶然的。

Answer 2

您不能像在其他一些命令式语言中那样阻止 Javascript 运行。浏览器中只有一个 Javascript 线程，因此如果将其挂在一个循环中，则不会发生其他任何事情。

您必须使用异步的、事件驱动的编程。设置一个与超时相结合的点击处理程序（或其他）是正确的开始方式。启动 15 秒的 setTimeout。在答案的点击处理程序中，取消超时。这样超时的处理程序只有在用户没有点击答案时才会发生。

例如：

var mytimeout = setTimeout(15000, function() {
    // This is an anonymous function that will be called when the timer goes off.
    alert("You didn't answer in time.");
    // Remove the answer so the user can't click it anymore, etc...
    $('#ans').hide();
});

$('#ans').click(function() {
    // Clear the timeout, so it will never fire the function above.
    clearTimeout(mytimeout);
    alert("You picked an answer!");
});

了解代码的结构必须如何使其成为事件驱动的。没有办法将其构造为“做这件事，然后在这里等待答案”。

Answer 3

您正在查看客户端 javascript，就好像它还没有处于事件驱动循环中一样。您需要做的就是等待适当的事件发生，如果尚未发生，请继续等待，或者执行一些默认操作。

你不需要：

create main loop: // All
    wait for user input // Of
        timer = start_timer() // This
        // Is done for you
        if [user has input data]: 
            process_data()
        else if [timer > allowed_time]:
            process_no_data()
        else:
            wait() // By the Browser

您只需要中间部分。您需要做的就是（后面是实际的javascript，而不是伪代码）：

// First, store all of the answer sections, 
// so you're not grabbing them every time 
// you need to check them.
var answers = {};
answers.ans1 = $("#ans1");
answers.ans2 = $("#ans2");
answers.ans3 = $("#ans3");

// This is a flag.  We'll use it to check whether we:
//    A. Have waited for 16 seconds
//    B. Have correct user input
var clear_to_proceed = false;
var timer_id;

// Now we need to set up a function to check the answers.    
function check_answers() {
    if ( ! clear_to_proceed ) {
        clear_to_proceed = checkAns(answers.ans1.text());
        clear_to_proceed = checkAns(answers.ans2.text());
        clear_to_proceed = checkAns(answers.ans3.text());
        // I assume checkAns returns
        // true if the answer is correct
        // and false if it is wrong
    } 
    if ( clear_to_proceed ) {
        clearTimeout(timer_id);
        return true; // Or do whatever needs be done, 
                     // as the client has answered correctly
    } else {
        // If we haven't set a timer yet, set one
        if ( typeof timer_id === 'undefined' ) {
            timer_id = setTimeout(function(){
                        // After 16 seconds have passed we'll check their
                        // answers one more time and then force the default.
                        check_answers();
                        clear_to_proceed = true;
                        check_answers(); 
                    }, 16000);
        }
        return false; // We're just waiting for now.
    }
}
// Finally, we check the answers any time the user interact
// with the answer elements.
$("#ans1,#ans2,#ans3").bind("focus blur", function() {
    check_answers();
});