如何在調用事件後延遲某個功能的執行？

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').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動畫方法在輪子停止旋轉後執行某些操作。

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