Javascript 我的井字游戏（jquery）无法正常运行。丢失的零件不能正常工作

“赢”和“抽”部分会准时出现，但“输”部分不会显示“你输了”的消息，直到我再次点击一个空单元格。请检查我的代码，并帮助我找到任何错误

下面是我的代码：

Marked是一个类，用于更改单击单元格的不透明度。 1,2,3…是表中各个单元格的id（html）

我也尝试了delay（）而不是setTimeout（），但效果不好

$(document).ready(function() {
    var timer;
    var x = 0;
    $("td").click(function() { 
        if($(this).text()=='') {
            $(this).text("0").addClass("marked");
            x = 1;
        } 
    }).click(function() { 
        if(x==1) {
            timer = setTimeout(function() {
                var choose = $("td").not(".marked");
                var random = choose[Math.floor(Math.random()*choose.length)];
                $(random).text("X").addClass("marked");
            },1000);
            x=0;
            showResult();
        }
    });
    function showResult() { 
        var one = $("#1").text();
        var two = $("#2").text();
        var three = $("#3").text();
        var four = $("#4").text();
        var five = $("#5").text();
        var six = $("#6").text();
        var seven = $("#7").text();
        var eight = $("#8").text();
        var nine = $("#9").text();
        if(one==two && two==three)
            result(one)
        else if (four==five && five==six) 
            result(four)
        else if(seven==eight && eight==nine)
            result(seven)
        else if (one==four && four==seven) 
            result(one)
        else if (two==five && five==eight)
            result(two)
        else if (three==six && six==nine) 
            result(three)
        else if (one==five && five==nine) 
            result(one)
        else if(three==five && five==seven)
            result(three);
        else {
            var z = $("td").not(".marked");
            if(z.length == 0) {
                $("p").text("Draw!");
                $("td").removeClass("marked");
                $("td").text("");
                $("#demo1").append('<img src="https://media.tenor.com/images/54c63f726505bfdb455eb4c29e626ad8/tenor.gif">');
                clearTimeout(timer);
            }
        } 
    } 
    function result(y) {
        var result = y;
        if(result=="X"){
            clearTimeout(timer);
            $("p").text("You Lost!");
            $("td").removeClass("marked");
            $("td").text("");
            $("#demo1").append('<img src="https://media.tenor.com/images/08902a85a6107684f8614846f4a54218/tenor.gif">');
        }
        if(result=="0") {
            $("td").text("");
            $("p").text("You Won!");
            $("#demo1").append('<img src="https://i.gifer.com/4OuC.gif">');
            $("td").removeClass("marked");
            clearTimeout(timer);
        }
    } 
});

$（文档）.ready（函数（）{
无功定时器；
var x=0；
$（“td”）。单击（函数（）{
如果（$（this）.text（）=''）{
$（此）.text（“0”）.addClass（“标记”）；
x=1；
} 
})。单击（函数（）{
如果（x==1）{
计时器=设置超时（函数（）{
var choose=$（“td”）。不（“.marked”）；
var random=choose[Math.floor（Math.random（）*choose.length）]；
$（随机）.text（“X”）.addClass（“标记”）；
},1000);
x=0；
showResult（）；
}
});
函数showResult（）{
var one=$（“#1”）.text（）；
var two=$（“#2”）.text（）；
变量三=$（“#3”）.text（）；
var-four=$（“#4”）.text（）；
变量五=$（“#5”）.text（）；
变量六=$（“#6”）.text（）；
var seven=$（“#7”）.text（）；
var八=$（“#8”）.text（）；
var nine=$（“#9”）.text（）；
如果（一=二&&二=三）
结果（一）
else if（四==五和五==六）
结果（四）
else if（七==八和八==九）
结果（七）
else if（1==4&&4==7）
结果（一）
else if（2==5&&5==8）
结果（二）
否则如果（三=六和六=九）
结果（三）
else如果（1==5&&5==9）
结果（一）
else if（三=五和五=七）
结果（三）；
否则{
var z=$（“td”）。未标记（“.marked”）；
如果（z.length==0）{
$（“p”）.text（“Draw！”）；
$（“td”）.removeClass（“标记”）；
$（“td”）。文本（“”）；
$（“#demo1”）。追加（“”）；
清除超时（计时器）；
}
} 
} 
功能结果（y）{
var结果=y；
如果（结果=“X”）{
清除超时（计时器）；
$（“p”）.text（“你输了！”）；
$（“td”）.removeClass（“标记”）；
$（“td”）。文本（“”）；
$（“#demo1”）。追加（“”）；
}
如果（结果=“0”）{
$（“td”）。文本（“”）；
$（“p”）.text（“您赢了！”）；
$（“#demo1”）。追加（“”）；
$（“td”）.removeClass（“标记”）；
清除超时（计时器）；
}
} 
});

当用户单击时，您立即调用showResult，因此它无法识别一秒钟后放入表中的X

只要做：

$("td").click(function() {
    [...]
}).click(function() {
    if (x == 1) {
        timer = setTimeout(function() {
            var choose = $("td").not(".marked");
            var random = choose[Math.floor(Math.random() * choose.length)];
            $(random).text("X").addClass("marked");

            /******** ADD ANOTHER CHECK HERE ********/
            showResult();
        }, 1000);
        x = 0;
        showResult();
    }
});

在showResult中添加一个返回值也是一个好主意，该返回值在获得结果时返回false。这样你可以做一些类似的事情

x = 0;
if (showResult()) {
    timer = setTimeout(function() {
        [...]
    }
}

而且用户不能在win消息之后立即获得松散消息

另外：为什么需要2点式侦听器？您只需在顶部使用if语句，就不需要

（x==1）