Question

对不起的标题感到抱歉，不确定如何标题。

然而，正在发生的问题是：JSFiddle

每当从下拉列表中选择多个值（一个接一个）而不刷新时，倒计时会不断地相互闪烁。

HTML：

<div id="countdown">Please select a value</div>
<select id="Dropdown" onchange="Run()">
  <option value="50">Nothing</option>
  <option value="1">Re:Zero kara Hajimeru Isekai Seikatsu</option>
  <option value="2">Kabaneri of the Iron Fortress</option>
  <option value="3">Boku no Hero Academia</option>
</select>

JS：

function Run() {
  var _s = document.getElementById("Dropdown");
  var s = _s.options[_s.selectedIndex].value;

  if (s == 50) {
    var end = new Date('02/25/2016 00:00 AM');
  } else if (s == 3) {
    var end = new Date('05/22/2016 6:30 PM');
  } else if (s == 2) {
    var end = new Date('05/20/2016 9:00 AM');
  } else if (s == 1) {
    var end = new Date('05/23/2016 3:00 AM')
  }


  var _second = 1000;
  var _minute = _second * 60;
  var _hour = _minute * 60;
  var _day = _hour * 24;
  var timer;

  function showRemaining() {
    var now = new Date();
    var distance = end - now;

    if (distance < 0) {

      clearInterval(timer);
      document.getElementById('countdown').innerHTML = "It's out already ;)";

      return;
    }

    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById('countdown').innerHTML = days + ' days, ' + hours + ' hours, ' + minutes + ' minutes, ' + seconds + ' seconds.';

  }

  timer = setInterval(showRemaining, 1000);

  if (s == 50) {
    document.getElementById('countdown').innerHTML = "Don't select nothing ;)"
end;
  }
}

Answer 1

每次在下拉列表Run()上调用change时，该函数都会创建一个新的timer变量。（ JavaScript中的变量具有功能级别范围。一旦超出范围，它们就会被垃圾收集）。因此，在您的代码中，永远不会成功调用clearInterval(timer)（日志将显示未定义），因为当您更改下拉列表时timer超出scope。

因此，请timer全局并在每个clearInterval上致电change，如下所示：

var timers; // Make a global timer variable

function Run() {
  console.log(timers); // Observe it holds the previous timer value
  clearInterval(timers); // clear interval here everytime 



  var _s = document.getElementById("Dropdown");
  var s = _s.options[_s.selectedIndex].value;

  if (s == 50) {
    var end = new Date('02/25/2016 00:00 AM');
  } else if (s == 3) {
    var end = new Date('05/22/2016 6:30 PM');
  } else if (s == 2) {
    var end = new Date('05/20/2016 9:00 AM');
  } else if (s == 1) {
    var end = new Date('05/23/2016 3:00 AM')
  }


  var _second = 1000;
  var _minute = _second * 60;
  var _hour = _minute * 60;
  var _day = _hour * 24;


  function showRemaining() {
    var now = new Date();
    var distance = end - now;

    if (distance < 0) {

      clearInterval(timers);
      document.getElementById('countdown').innerHTML = "It's out already ;)";

      return;
    }

    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById('countdown').innerHTML = days + ' days, ' + hours + ' hours, ' + minutes + ' minutes, ' + seconds + ' seconds.';

  }

  timers = setInterval(showRemaining, 1000);
  console.log(timers); // observe the value set here

  if (s == 50) {
    document.getElementById('countdown').innerHTML = "Don't select nothing ;)"
    end;
  }
}

<div id="countdown">Please select a value</div>
<select id="Dropdown" onchange="Run()">
  <option value="50">Nothing</option>
  <option value="1">Re:Zero kara Hajimeru Isekai Seikatsu</option>
  <option value="2">Kabaneri of the Iron Fortress</option>
  <option value="3">Boku no Hero Academia</option>
</select>

下拉选择倒计时 - 不断变化

1 个答案: