Question

我正在尝试用javascript制作纸牌游戏。我希望用户在单击“clicky”按钮时看到卡片的正面，然后再次单击时看到同一张卡片的背面。在点击之后，我希望它切换到下一张卡的前面，依此类推。现在，当第五张卡片显示时，我用五张新卡重新加载页面。每张卡都是可变卡中的一个项目，每次点击更改的元素都是带有身份证的p标签。

我的代码正在运行，但如果我有更多的卡片，大约七张，它就开始滞后了。拥有两个相互调用的函数是不是一个坏主意？有没有更好的方法来编写这个代码，以便我可以有更多的卡？

以下是代码：

<html>
<body>
<p id=”card”></p>
<button id="clicky">Fråga</button>
<script type="text/javascript">
    var cards = [[”front1”, ”back1”], [”front2”, ”back2”], [”front3”, ”back3”], [”front4”, ”back4”], [”front5”, ”back5”]];

    var a = 0;
    var clicky = document.getElementById("clicky");
    clicky.addEventListener("click", function(){setFront(a)});

    var card = document.getElementById(”card”);

    function setFront (a) {
        card.textContent = cards[a][0];
        clicky.addEventListener("click", function(){setBack(a)});
    }

    function setBack (a) {
        card.textContent = cards[a][1];
        a += 1;
        if (a < 5) {
            clicky.addEventListener("click", function(){setFront(a)});
        } else {
            clicky.addEventListener("click", function() {
                window.location=url;
            });
        }
    }
</script>
</body>
</html>

任何帮助表示赞赏！

Answer 1

您是否有一些可能影响页面性能的任务？如果是这样，你可以使用＆＃34;网络工作者＆＃34;，它将停止＆＃34;动画延迟＆＃34;当这些任务完成时。

http://www.w3schools.com/html/html5_webworkers.asp

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

滞后Javascript纸牌游戏

1 个答案: