在事件后自动运行 JavaScript答案

【问题标题】：Run JavaScript after event instead automatically在事件后自动运行 JavaScript
【发布时间】：2021-05-11 05:25:24
【问题描述】：

我对 JavaScript 还是很陌生，一直在绞尽脑汁想为什么这不起作用。我已经阅读并尝试了很多帖子（主要是this one、this one、this one 和this one），但都没有解决我的问题。

我正在创建一个站点，该站点应该仅在触发时（例如单击按钮）才运行某些功能。这包括一个计时器和一个相关的进度条。到目前为止，两者基本上都有效，但总是在页面加载后立即开始倒计时。我已经尝试了其他帖子中的所有建议答案，但是

要么完全停止函数的运行（在函数行完全停止运行这两个函数之前插入document.getElementById("start_timer").addEventListener('click', [...]？）
或者根本没有任何效果（如下所示）。

我做错了什么？非常感谢您非常感谢您的帮助！

我的代码是这样的（我也发了JSFiddle）：

//onclick event for progressbar
document.getElementById("start_progressbar").onclick = progress;

//progress bar
    function progress(timeleft, timetotal, $element) {
      var progressBarWidth = (timetotal - timeleft) * ($element.width() / timetotal);
      $element.find('div').animate({
        width: progressBarWidth
      }, timeleft == timetotal ? 0 : 1000, "linear"); //.html(timeleft + " seconds to go"); //comment out -html if no text should appear in the progress bar
      if (timeleft > 0) {
        setTimeout(function() {
          progress(timeleft - 1, timetotal, $element);
        }, 1000);
      }
    }

    progress(5, 5, $('#progress_bar')); // put the desired number of secons here


//onclick event for progressbar
document.getElementById("start_timer").onclick = startTimer;

//countdown timer  
      function startTimer(duration, display) {
      var timer = duration,
        minutes, seconds;
      setInterval(function() {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.text(minutes + ":" + seconds);

        if (--timer < 0) {
          timer = 0; //set to "0" if you want timer to stop, or to same value as time to cycle continously
        }
      }, 1000);
    }

    jQuery(function($) {
      var fiveMinutes = 5 * 1, //put the desired time for the countdown here (format seconds (max60)x multiplier)
        display = $('#countdown_timer');
      startTimer(fiveMinutes, display);
    });

#progress_bar {
  width: 90%;
  height: 23px;
  bottom: 22px;
  left: 50%;
  transform: translate(-50%);
  position: fixed;
  background-color: #0A5F44;
  z-index: 2;
}

#progress_bar div {
  height: 100%;
  text-align: left;
  padding: 0 10px;
  line-height: 23px; /* same as #progressBar height if we want text middle aligned */
  width: 0;
  background-color: #CBEA00;
  box-sizing: border-box;
}

#countdown_timer {
  position: fixed;
  bottom: 14px;
  left: 6%;
  z-index: 3;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
   <body>
     <button type="button" id="start_progressbar">start the progressbar
     </button>
     <button type="button" id="start_timer">start the timer
     </button>
     <div id="progress_bar">
       <div></div>
     </div>
     <div id="countdown_timer"></div>
   </body>

 </html>

【问题讨论】：

你能解释一下为什么你有两个功能和两个按钮吗？在调用函数以使进度条制作动画时，仅拥有其中一个还不够吗？
请描述你希望你的程序做什么，因为这看起来像是混合了相互冲突的解决方案。这些按钮究竟应该完成什么？

标签： javascript html

【解决方案1】：

阅读我写的最后一条评论

//progress bar
    function progress(timeleft, timetotal, $element) {
      var progressBarWidth = (timetotal - timeleft) * ($element.width() / timetotal);
      $element.find('div').animate({
        width: progressBarWidth
      }, timeleft == timetotal ? 0 : 1000, "linear"); //.html(timeleft + " seconds to go"); //comment out -html if no text should appear in the progress bar
      if (timeleft > 0) {
        setTimeout(function() {
          progress(timeleft - 1, timetotal, $element);
        }, 1000);
      }
    }

    progress(5, 5, $('#progress_bar')); // Remove this line as this call the progress function immidiately when code execution

【讨论】：

太棒了！非常感谢！通过将最后一行修改为：document.getElementById("start_progressbar").addEventListener('click', function (){ progress(5, 5, $('#progress_bar')); }); 使其工作