Question

我有一个循环创建了4个生成随机数的div。那些div也被赋予了GIF。我有另一个渐渐消失并淡出这些图像的循环。点击GIF几次后生成随机数猜测整个页面冻结，我该如何解决这个问题？它与缓存有关吗？我在点击功能后循环fadeIn和fadeOut。

这是我的代码：

var startGame = function () {
    $(".crystals").empty();
    var images = [
        'https://thumbs.gfycat.com/WeightyAgreeableDanishswedishfarmdog-max-1mb.gif',
        'http://31.media.tumblr.com/224595f52671895de1608de69012d1d6/tumblr_nfk2itPn1tqou9go1_500.gif',
        'http://pictures.willowsgraphics.com/compybackup/pics/animatedicons/shootingstar.gif',
        'https://media.giphy.com/media/yfoeIMBjzVw52/giphy.gif',
    ];
    randomNumber = Math.floor(Math.random() * 101) + 19;
    $("#result").html('Catch this many stars: ' + randomNumber);
    for (var i = 0; i < 4; i++) {
        var cardRandom = Math.floor(Math.random() * 11) + 1;
        var crystal = $("<div>");
        crystal.attr({
            "class": 'crystal',
            "data-random": cardRandom
        });
        crystal.css({
            "background-image": "url('" + images[i] + "')",
            "background-size": "cover",
            "background-position": "center"

        });
        $(".crystals").append(crystal);
        $("#previous").html("Total Score: " + previousNumber);
    }
}

startGame();
$(document).on("click", '.crystal', function () {

    var num = parseInt($(this).attr('data-random'));
    var loopImages = function () {

        $('.crystal').fadeIn(1500, function () {
            $('.crystal').fadeOut(1500, loopImages);
        });
    }

    loopImages();
    previousNumber += num;

    $("#previous").html("Total Score: " + previousNumber);
    if (previousNumber > randomNumber) {
        losses++;
        $("#losses").html("Your Losses: " + losses);
        previousNumber = 0;
        startGame();
    }
    else if (previousNumber === randomNumber) {
        wins++;
        $("#wins").html("Your Wins: " + wins);
        previousNumber = 0;
        startGame();
    }
});

Answer 1

我想通了，我试图为错误的div循环衰落：）

循环的GIF正在崩溃我的HTML页面

1 个答案: