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

How do I delay a function from executing after an event has been called?

本文关键字：延迟函数执行事件调用更新时间：2023-09-26

我有一个游戏的旋转器。我想一个问题形式出现一旦旋转器已停止旋转。是否有一种方法可以延迟启动后点击旋转的形式?

/*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();
    };
}

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

$('#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动画来做动画呢?然后，您可以点击jQuery animate的完整方法，在车轮停止旋转后执行一些操作。

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