如何在调用事件后延迟函数执行？

Question

我有一个用于我正在构建的游戏的微调器。一旦微调器停止旋转，我希望出现一个问题表。有没有办法在点击旋转后延迟表单的启动？

/*WHEEL SPIN FUNCTION*/

$('#spin').click(function() {

    //add 1 every click
    clicks++;

    /*multiply the degree by number of clicks
    generate random number between 1 - 360,
    then add to the new degree*/

    var newDegree = degree * clicks;
    var extraDegree = Math.floor(Math.random() * (360 - 1 + 1)) + 1;
    totalDegree = newDegree + extraDegree;

    /*let's make the spin btn to tilt every
    time the edge of the section hits
    the indicator*/

    $('#wheel .sec').each(function() {
        var t = $(this);
        var noY = 0;

        var c = 0;
        var n = 700;
        var interval = setInterval(function() {
            c++;
            if (c === n) {
                clearInterval(interval);
            }

            var aoY = t.offset().top;
            $("#txt").html(aoY);
            console.log(aoY);

            /*23.7 is the minimum offset number that
            each section can get, in a 30 angle degree.
            So, if the offset reaches 23.7, then we know
            that it has a 30 degree angle and therefore,
            exactly aligned with the spin btn*/

            if (aoY < 23.89) {
                console.log('<<<<<<<<');
                $('#spin').addClass('spin');
                setTimeout(function() {
                    $('#spin').removeClass('spin');
                }, 100);
            }
        }, 10);

        $('#inner-wheel').css({
            'transform': 'rotate(' + totalDegree + 'deg)'
        });

        noY = t.offset().top;

    });
    //have form appear once the spinner stops

    showForm();

});

function showForm() {
    if (aoY > 0) {
        $("#formWrapper").show();
    };
}

Answer 1

在这段代码中不太确定是什么停止了旋转，但我在 setTimeout 函数中看到了一个 removeClass("spin")。为什么不直接触发这个函数内部的表单呢？

$('#spin').click(function() {

    //add 1 every click
    clicks++;

    /*multiply the degree by number of clicks
    generate random number between 1 - 360,
    then add to the new degree*/

    var newDegree = degree * clicks;
    var extraDegree = Math.floor(Math.random() * (360 - 1 + 1)) + 1;
    totalDegree = newDegree + extraDegree;

    /*let's make the spin btn to tilt every
    time the edge of the section hits
    the indicator*/

    $('#wheel .sec').each(function() {
        var t = $(this);
        var noY = 0;

        var c = 0;
        var n = 700;
        var interval = setInterval(function() {
            c++;
            if (c === n) {
                clearInterval(interval);
            }

            var aoY = t.offset().top;
            $("#txt").html(aoY);
            console.log(aoY);

            /*23.7 is the minimum offset number that
            each section can get, in a 30 angle degree.
            So, if the offset reaches 23.7, then we know
            that it has a 30 degree angle and therefore,
            exactly aligned with the spin btn*/

            if (aoY < 23.89) {
                console.log('<<<<<<<<');
                $('#spin').addClass('spin');
                setTimeout(function() {
                    $('#spin').removeClass('spin');
                    showForm();
                }, 100);
            }
        }, 10);

        $('#inner-wheel').css({
            'transform': 'rotate(' + totalDegree + 'deg)'
        });

        noY = t.offset().top;

    });
    //have form appear once the spinner stops



});

function showForm() {
    if (aoY > 0) {
        $("#formWrapper").show();
    };
}

---

新建议

您似乎正在使用 css 变换/动画来为车轮的旋转设置动画。为什么不使用 jQuery animate 来做动画呢？然后，您可以在车轮停止旋转后使用 jQuery animate 的完整方法来执行某些操作。

$('#inner-wheel').animate({ textIndent: 0 }, { 
  step: function( now, fx ) {
    $(this).css('transform', 'rotate(' + totalDegree + 'deg)' );
  },
  complete: function() { 
    setTimeout( function() { 
      showForm( 1 ) 
    }, 5000); 
  }
});