在倒数计时器结束时将变量设置为 false

Question

我可能只是在这里太密集了...我有一个变量 timeDiscount，当页面加载时它是 true。此外，当页面加载时，计数器开始。在计数器结束时，我将 timeDiscount 设置为 false... 除了这似乎不起作用...

在此 jsFiddle 中，单击 "CLICK" 单词将提醒您 timeDiscount 的当前状态，即使在计数器停止后，单击 returns 仍为真。这是为什么？

https://jsfiddle.net/df773p9m/4/

function startTimer(duration, display) {
  var timer = duration, minutes, seconds;
  refreshIntervalId = 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) {
      clearInterval(refreshIntervalId)
      timeDiscount = false;
    }
  }, 1000);
}

jQuery(function ($) {
  var timeDiscount = true
  var fiveMinutes = 5,
    display = $('#time');
  startTimer(fiveMinutes, display);

  $("#discount").click(function() {
    alert(timeDiscount);
  })
});

Answer 1

您遇到了范围界定问题。

在您的代码中，timeDiscount 在页面加载时执行的未命名函数 (jQuery(function ($) {...) 中声明。该变量仅由该函数内部的标识符所知，但您正试图从 startTimer 函数访问它。

将声明移到未命名函数之外：

var timeDiscount = true

function startTimer(duration, display) {
  var timer = duration, minutes, seconds;
  refreshIntervalId = 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) {
      clearInterval(refreshIntervalId)
      timeDiscount = false;
    }
  }, 1000);
}

jQuery(function ($) {
  var fiveMinutes = 5,
    display = $('#time');
  startTimer(fiveMinutes, display);

  $("#discount").click(function() {
    alert(timeDiscount);
  })
});

Answer 2

变量必须是全局变量才能在 javascript 函数中访问它，因此将其保持在外层

var timeDiscount = true
function startTimer(duration, display) {
  var timer = duration, minutes, seconds;
  refreshIntervalId = 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) {
      clearInterval(refreshIntervalId)
      timeDiscount = false;
    }
  }, 1000);
}

jQuery(function ($) {
  var fiveMinutes = 5,
    display = $('#time');
  startTimer(fiveMinutes, display);

  $("#discount").click(function() {
    alert(timeDiscount);
  })
});

Answer 3

您需要在全局范围内声明 timeDiscount 变量，即在 startTimer 函数之前，这样当您在 startTimer() 中引用相同的变量时，它可以用于它，否则它会创建一个全局变量并将其设置为 false.

在全局范围内创建的变量 (timeDiscount) 与 $(function() { var timeDiscount=true; }) 中存在的变量完全不同，后者是该范围的本地变量，这就是为什么您从未收到任何错误也没有收到的原因如你所料。

JS代码：

var timeDiscount = true;

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 = duration;
         timeDiscount = false;
     }
   }, 1000);
}

Live Demo @ JSfiddle

Answer 4

首先有两种方法可以实现：将您的 timeDiscount 变量移到函数外部，使其成为全局变量，如下所示：

   var timeDiscount = true
   function startTimer(duration, display) {
   var timer = duration, minutes, seconds;
   refreshIntervalId = 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) {
     clearInterval(refreshIntervalId)
     timeDiscount = false;
   }
   }, 1000);
}

   jQuery(function ($) {
   var fiveMinutes = 5,
   display = $('#time');
   startTimer(fiveMinutes, display);

   $("#discount").click(function() {
      alert(timeDiscount);
   })
});

或者你可以像这样简单地在你的 timeDiscount 函数中添加 window 并使其成为 window.timeDiscount （参考这个 link Define global variable in a JavaScript function):

   function startTimer(duration, display) {
   var timer = duration, minutes, seconds;
   refreshIntervalId = 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) {
     clearInterval(refreshIntervalId)
     timeDiscount = false;
   }
   }, 1000);
}

   jQuery(function ($) {

   window.timeDiscount = true
   var fiveMinutes = 5,
   display = $('#time');
   startTimer(fiveMinutes, display);

   $("#discount").click(function() {
      alert(timeDiscount);
   })
});

在倒数计时器结束时将变量设置为 false

Set variable to false at the end of countdown timer

javascript

jquery

setinterval