等待用户点击而不是页面加载来启动功能

Wait for user click rather than page load to start function

本文关键字:加载 启动 功能 用户 等待      更新时间:2023-09-26

我目前正在尝试制作一个倒计时时钟,当用户单击按钮时,该时钟将启动计时器。但是,现在页面一加载就开始倒计时。我怎么能等到用户真正按下id='startCountdown'按钮才能启动countdown呢。我是JavaScript的新手,希望能给我一些反馈。

.js代码:

// Wait for webpage to load
$(document).ready(function(){
  var sessionTime = 1;
  var breakTime = 5;
  // Update session and break times with pre-defined variables
  $('#session-time').text(sessionTime);
  $('#rest-time').text(breakTime);
  // jQuery click functions for increasing and decreasing time
  $('#decrease-session').on('click', downSession);
  $('#increase-session').on('click', upSession);
  $('#decrease-rest').on('click', downBreak);
  $('#increase-rest').on('click', upBreak);

  // Decrease the length of each session
  function downSession() {
    sessionTime--;
    $('#session-time').text(sessionTime);
    $('#countdown-time').text(sessionTime);
  }
  // Increase the length of each session
  function upSession() {
    sessionTime++;
    $('#session-time').text(sessionTime);
    $('#countdown-time').text(sessionTime);
  }
  // Decrease the length of each break
  function downBreak() {
    breakTime--;
    $('#rest-time').text(breakTime);
  }
  // Increase the length of each break
  function upBreak() {
    breakTime++;
    $('#rest-time').text(breakTime);
  }
  // Convert session and break times to seconds
  var sessionConverted = sessionTime * 60;
  var breakConverted   = breakTime   * 60;
  // When clicked, send to start countdown
  $('#startCountdown').on('click', countdown(sessionConverted));
  // Convert time and return in H:M:S
  function convertTime(time) {
    time = parseInt(time, 10);
    var hours   = Math.floor(time / 3600);
    var minutes = Math.floor((time % 3600) / 60);
    var seconds = Math.floor((time % 3600) % 60);
    return {
      'H': hours,
      'M': minutes,
      'S': seconds
    };
  }
  // Interval function that will decrement the time
  function countdown(count) {
    var timerId = setInterval(function() {
      // Decrement the count
      count--;
      // Send count to convertTime to display
      var t = convertTime(count);
      var hours = 0;
      var mins  = 0;
      var secs  = 0;
      // If statements to check if time is less than 10
      // If so, add leading "0"
      (t['H'] < 10) ? (hours = "0" + t['H']) : (hours = t['H']);
      (t['M'] < 10) ? (mins  = "0" + t['M']) : (mins  = t['M']);
      (t['S'] < 10) ? (secs  = "0" + t['S']) : (secs  = t['S']);
      if (hours >= 1) {
        $('#countdown-time').text(hours + ":" + mins + ":" + secs);
      } else {
        $('#countdown-time').text(mins + ":" + secs);
      }
      // Stop counting if the count has reached "0"
      if(count < 1) {
        clearInterval(timerId);
      }
    }, 1000);
  }
});

用于测试的代码笔:

http://codepen.io/Mukul215/pen/obxLev

您将立即调用countdown函数,而不是将其作为处理程序提供给.on

$('#startCountdown').on('click', countdown(sessionConverted));

因为在表达式中使用了括号,所以会立即调用countdown(sessionConverted),并将返回值作为处理程序提供给.on方法。因为返回值不是一个函数,所以click事件实际上没有任何作用。

试试这个:

$('#startCountdown').on('click', function (e) {
    countdown(sessionConverted);
});

这可能是因为您已经在$(document).ready(function(){}) 中编写了所有代码

尝试删除$(document).ready(function(){})函数外的单击事件。试试下面给出的代码:

        var sessionTime;
        var breakTime;
        // Wait for webpage to load
        $(document).ready(function () {
             sessionTime = 1;
             breakTime = 5;
            // Update session and break times with pre-defined variables
            $('#session-time').text(sessionTime);
            $('#rest-time').text(breakTime);
            // jQuery click functions for increasing and decreasing time
            $('#decrease-session').on('click', downSession);
            $('#increase-session').on('click', upSession);
            $('#decrease-rest').on('click', downBreak);
            $('#increase-rest').on('click', upBreak);
            // When clicked, send to start countdown
            $('#startCountdown').on('click', countdown(sessionConverted));
        });
        // Decrease the length of each session
        function downSession() {
            sessionTime--;
            $('#session-time').text(sessionTime);
            $('#countdown-time').text(sessionTime);
        }
        // Increase the length of each session
        function upSession() {
            sessionTime++;
            $('#session-time').text(sessionTime);
            $('#countdown-time').text(sessionTime);
        }
        // Decrease the length of each break
        function downBreak() {
            breakTime--;
            $('#rest-time').text(breakTime);
        }
        // Increase the length of each break
        function upBreak() {
            breakTime++;
            $('#rest-time').text(breakTime);
        }
        // Convert session and break times to seconds
        var sessionConverted = sessionTime * 60;
        var breakConverted = breakTime * 60;

        // Convert time and return in H:M:S
        function convertTime(time) {
            time = parseInt(time, 10);
            var hours = Math.floor(time / 3600);
            var minutes = Math.floor((time % 3600) / 60);
            var seconds = Math.floor((time % 3600) % 60);
            return {
                'H': hours,
                'M': minutes,
                'S': seconds
            };
        }
        // Interval function that will decrement the time
        function countdown(count) {
            var timerId = setInterval(function () {
                // Decrement the count
                count--;
                // Send count to convertTime to display
                var t = convertTime(count);
                var hours = 0;
                var mins = 0;
                var secs = 0;
                // If statements to check if time is less than 10
                // If so, add leading "0"
                (t['H'] < 10) ? (hours = "0" + t['H']) : (hours = t['H']);
                (t['M'] < 10) ? (mins = "0" + t['M']) : (mins = t['M']);
                (t['S'] < 10) ? (secs = "0" + t['S']) : (secs = t['S']);
                if (hours >= 1) {
                    $('#countdown-time').text(hours + ":" + mins + ":" + secs);
                } else {
                    $('#countdown-time').text(mins + ":" + secs);
                }
                // Stop counting if the count has reached "0"
                if (count < 1) {
                    clearInterval(timerId);
                }
            }, 1000);
        }