javascript - 在功能内部添加延迟

我发现了一个不错的五彩纸屑脚本，当我的代码片段中宣布了优胜者时，我将其用作一种效果。

我已经将五彩纸屑开始绑定到一个名为“ startConfetti”的按钮。

我还有一个不同的按钮“ bt1”，它开始了获胜者的选择过程。

现在，我有一个脚本，当我单击“ bt1”时单击“ startConfetti”

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

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

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

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

这是我的按钮

 <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>

和按钮初始化

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

以及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));
          }
          StartConfetti();
      }

我已经试过了-

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

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

我也尝试添加

setTimeout(startConfetti, 29000);

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

我在做什么还是在做什么错，以实现“ bt1”以单击“ startConfetti”按钮并在“ startConfetti”脚本运行之前添加延迟？

最佳答案

您将超时放置在事件回调之外。因此，单击将没有任何结果，并且超时将在代码加载后立即开始。

只需将超时放入事件回调中即可。

$('#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);
  }