Question

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

在这个jsFiddle中，单击“CLICK”字会提醒您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 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变量移到函数外部，使它成为一个像这样的全局变量：

   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);
   })
});

或者您只需在window内添加timeDiscount功能，然后将其设为window.timeDiscount（请参阅此链接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);
   })
});

Answer 4

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

在全局范围内创建的变量（timeDiscount）与您$(function() { var timeDiscount=true; })内的变量（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); }完全不同，这是该范围的本地变量，这就是为什么你从来没有得到任何错误也没有得到你的东西预期

JS代码：

{{1}}

Live Demo @ JSfiddle

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

4 个答案: