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

Set variable to false at the end of countdown timer

本文关键字：变量 false 设置 倒数 计时器 结束      更新时间：2023-09-26

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

在这个jsFiddle中，单击"CLICK"字将提醒您timeDiscount的当前状态，即使在计数器停止后，单击也会返回true。为什么呢?

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

你有一个作用域问题。

在您的代码中，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);
  })
});

变量必须是全局变量才能在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);
  })
});

首先有两种方法:将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(参考这个链接在JavaScript函数中定义全局变量):

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

您需要在全局范围内声明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 @ jsfield

相关文章：