当另一个开关启动时,如何停止第一个开关的执行

JS - How to stop execution of a first switch when another is started?

本文关键字:开关 何停止 第一个 执行 另一个 启动      更新时间:2023-09-26

我开始制作一款文字游戏,基本理念是:当游戏开始时,用户必须在输入框中输入他的选择。他输入的文本与函数中的开关交互,如果用户输入"正确的命令",它会调用另一个可能包含另一个开关的函数,以此类推。我在这段代码中有一个bug:第一个函数内部的开关工作良好,当它的第一个case(case"yes")调用另一个函数时,一切都开始正常工作。但是,当用户输入应该与第二个函数的开关交互的文本时,他实际上仍然与第一个函数的开关交互(也与第二个函数交互)。有没有人愿意帮我解决这个问题或者给我指出正确的方向?

var startGame = function(){
    showText("Welcome to the virtual pseudo-reality")
    showText("Are you ready to start your journey?")
    $('#btn').click(function(e) {
      e.preventDefault();
        switch ($('input[name=myInput]').val().toLowerCase()) {
            case "yes": showText("- "+$('input[name=myInput]').val());
                showText("Welcome aboard!");
                    selectChar();
            break;
            case "no": showText("- "+$('input[name=myInput]').val());
                showText("Your choise is no.");
            break;
            default:
                showText("- "+$('input[name=myInput]').val());
                showText("Sorry, wrong input.") ;
            break;
        };
      $('input[name=myInput]').val('');
      var element = document.getElementById("storyBoard");
        element.scrollTop = element.scrollHeight;
        });
    };
//A first in-game function, needs to select the character that user want to be:
var selectChar = function(){
    showText("<br>"+"Choose who you are, you have to choose one of two heroes: Phantomorph and Disogr.");
    $('#btn').click(function(e) {
      e.preventDefault();
        switch ($('input[name=myInput]').val().toLowerCase()) {
            case "phantomorph": showText("- "+$('input[name=myInput]').val());
                showText("You choosed Phantomorph.");
                    user = phantomorph; friend = disogr;
            break;
            case "disogr": showText("- "+$('input[name=myInput]').val());
                showText("You choosed Disogr.");
                    user = disogr; friend = phantomorph;
            break;
            default: alert("You need to make a right choose.");
                selectChar();
            break;
        };
      $('input[name=myInput]').val('');
      var element = document.getElementById("storyBoard");
    element.scrollTop = element.scrollHeight;
        });
    };
startGame();

您将多个事件绑定到相同的输入,因此当用户第二次单击时,两个事件处理程序回调都将执行。

因为你正在使用jQuery,我会从使用.click切换到.on('click',然后在切换的情况下,你绑定第二个点击处理程序,你可以使用.off('click'来删除初始处理程序。

最好还是有一个变量来跟踪游戏状态,并将第二个事件处理程序的绑定移出切换案例。你需要这样做,否则你将在每次用户单击时重新绑定单击处理程序。

[编辑]

你可以一次添加任意数量的事件处理程序,只要DOM元素准备好了(在jQuery文档准备好回调),或者绑定一个点击事件,并在事件处理程序中包含逻辑,检查你已经从用户那里捕获的数据,以触发任何任意行为。

我建议您创建一个click处理程序,并在回调中检查user变量的值,看看用户是否已经为它设置了值。(您只需要确保该变量的范围是可访问的点击处理程序,您的应用程序的任何部分需要它,目前在您的例子中没有var user;)