Javascript 在函数中添加延迟

我发现了一个很好的五彩纸屑脚本，当在我的代码中宣布获胜者时，我会使用它作为效果

我把五彩纸屑的开头绑在一个叫做“startConfetti”的按钮上

我还有一个不同的按钮“bt1”，用于启动优胜者选择过程

现在我有了一个脚本，当我点击“bt1”时，它会点击“startConfetti”

现在我想要的是在点击“startConfetti”之间添加一个延迟

下面是一些代码。 当您单击“startConfetti”时，这将启动五彩纸屑

这是我的纽扣

 <div id="container">
            <button id="startConfetti" style="display: none" ></button>    
            <button id="bt1" class="button button5">< R30K</button>
            <button id="bt2" class="button button5">R30K - R70K</button>
            <button id="bt3" class="button button5">> R70K</button>
        </div>

以及startConfetti初始化

function InitializeButton() {
          $('#startConfetti').click(InitializeConfetti);
          $('#stopConfetti').click(DeactivateConfetti);
          $('#restartConfetti').click(RestartConfetti);
      }

function InitializeConfetti() {
          canvas.style.display = 'block';
          particles = [];
          animationComplete = false;
          for (var i = 0; i < mp; i++) {
              var particleColor = particleColors.getColor();
              particles.push(new confettiParticle(particleColor));
          }
          StartConfetti();
      }

但这会使脚本自行运行，并在29秒后自动延迟页面加载脚本

我还尝试添加

setTimeout(startConfetti, 29000);

在代码中的几个地方，但仍然没有影响

---

要实现“bt1”单击“startConfetti”按钮并在“startConfetti”脚本运行之前添加延迟，我没有做什么或做错了什么？

在单击事件内执行超时，例如：

 function InitializeConfetti() {
              canvas.style.display = 'block';
              particles = [];
              animationComplete = false;
              for (var i = 0; i < mp; i++) {
                  var particleColor = particleColors.getColor();
                  particles.push(new confettiParticle(particleColor));
              }
              setTimeout(function() {
                StartConfetti();
              }, 29000);


          }

函数初始化Econfetti（）{
canvas.style.display='block'；
粒子=[]；
animationComplete=false；
对于（变量i=0；i

在单击事件内执行超时，例如：

 function InitializeConfetti() {
              canvas.style.display = 'block';
              particles = [];
              animationComplete = false;
              for (var i = 0; i < mp; i++) {
                  var particleColor = particleColors.getColor();
                  particles.push(new confettiParticle(particleColor));
              }
              setTimeout(function() {
                StartConfetti();
              }, 29000);


          }

函数初始化Econfetti（）{
canvas.style.display='block'；
粒子=[]；
animationComplete=false；
对于（变量i=0；i

您将超时置于事件回调之外。因此，单击将变为nothing，代码加载后超时将立即开始

只需将超时放在事件回调中

$('#bt1').on("click", '#startConfetti', function (e) {
     setTimeout(function() {
        $('#startConfetti').trigger('click');
     }, 29000);
 });

另一种选择是，如果希望在调用startConfetti函数时发生延迟，则只需在超时中包装该函数

function StartConfetti() {
      setTimeout(function(){
          W = window.innerWidth;
          H = window.innerHeight;
          canvas.width = W;
          canvas.height = H;
          (function animloop() {
              if (animationComplete) return null;
              animationHandler = requestAnimFrame(animloop);
              return Draw();
          })();
      }, 29000);
  }

---

您将超时放置在事件回调之外。因此，单击将变为nothing，代码加载后超时将立即开始

只需将超时放在事件回调中

$('#bt1').on("click", '#startConfetti', function (e) {
     setTimeout(function() {
        $('#startConfetti').trigger('click');
     }, 29000);
 });

另一种选择是，如果希望在调用startConfetti函数时发生延迟，则只需在超时中包装该函数

function StartConfetti() {
      setTimeout(function(){
          W = window.innerWidth;
          H = window.innerHeight;
          canvas.width = W;
          canvas.height = H;
          (function animloop() {
              if (animationComplete) return null;
              animationHandler = requestAnimFrame(animloop);
              return Draw();
          })();
      }, 29000);
  }

---

您可以尝试将setTimeout代码放在onclick处理程序中，（在您的示例中，它在外部）这是完整的脚本您可以尝试将setTimeout代码放在onclick处理程序中，（在您的示例中，它在外部）这是完整的脚本，我的代码一定有问题，因为我一单击“startConfetti”按钮或“bt1”时，五彩纸屑立即开始掉落。您在JSFIDLE中调用代码两次，一次在控制台中调用，一次在githubThank you@madalinivascu中调用，对我自己的代码进行了几次调整后，您提供的帮助使一切都完美运行。谢谢您的时间。我的代码一定有问题，因为只要我单击“startConfetti”按钮或“bt1”，五彩纸屑就会立即掉落。您在JSFIDLE中调用代码两次，一次在控制台，一次在githubThank you@madalinivascu，在对我自己的代码进行了几次调整后，您提供的帮助使一切都变得完美。谢谢你的时间。测试你的两个选项，似乎我有一个不同的问题。当我点击“bt1”或“startConfetti”时，五彩纸屑立即掉落，没有任何延迟。看看，你注册和触发事件的方式有点奇怪。我不清楚为什么会发生这种情况，这需要大量的挖掘，但如果您只是从html中删除脚本标记，然后在js中添加$（'#bt1'）。单击（InitializeNotti）到InitializeButton函数，它就可以工作了感谢@Shane_lL，您的代码帮助和工作非常好。非常感谢你的两个选择，看来我有一个不同的问题。当我点击“bt1”或“startConfetti”时，五彩纸屑立即掉落，没有任何延迟。看看，你注册和触发事件的方式有点奇怪。我不清楚为什么会发生这种情况，这需要大量的挖掘，但如果您只是从html中删除脚本标记，然后在js中添加$（'#bt1'）。单击（InitializeNotti）到InitializeButton函数，它就可以工作了感谢@Shane_lL，您的代码帮助和工作非常好。备受赞赏的人