第二个区间值生成后如何清除第一个区间值

Question

我有一个函数可以在点击按钮后每两秒连续生成一次值。

如果按钮点击2次函数生成2个值等等。

我在第二次点击时使用 clearInterval 等等以避免重复值。

var clickValue = 0;
function func() {
  var value = 0;
  var generateValue = function() {
    value = value + 1;
    console.log('value: ' + value);
  }
  
  var startInterval = setInterval(generateValue, 2000);
    
  clickValue = clickValue + 1;
  console.log(clickValue + ' click');

  if (clickValue > 1) {
    clearInterval(startInterval);
    console.log('Interval on ' + clickValue + ' click cleared');
  }
}

<button onclick="func()">Click</button>

如果我们运行上面的代码，它只是清除第二个间隔等等。第一个区间的值还是运行ning.

我预期的结果：

1 click
value: 1
value: 2
value: 3
2 click
Interval on 1 click cleared
value: 1
value: 2
value: 3
3 click
Interval on 2 click cleared
value: 1
value: 2
value: 3

如何在第二次点击后清除第一个区间值并开始第二个区间值等等如上结果？

Answer 1

像这样？

var clickValue = 0;
var value = 0;
var startInterval;
function func() {
  var generateValue = function() {
    value = value + 1;
    console.log('value: ' + value);
  }
  
  startInterval = setInterval(generateValue, 2000);
    
  clickValue = clickValue + 1;
  console.log(clickValue + ' click');

  if (clickValue > 1) {
    clearInterval(startInterval);
    console.log('Interval on ' + (clickValue-1) + ' click cleared');
    value = 0;
  }
}

<button onclick="func()">Click</button>

Answer 2

试试

var clickValue = 0;
var startInterval;
function func() {
  var value = 0;
  var generateValue = function() {
    value = value + 1;
    console.log('value: ' + value);
  }

  clearInterval(startInterval);

  startInterval = setInterval(generateValue, 2000);

  clickValue = clickValue + 1;
  console.log(clickValue + ' click');

  if (clickValue > 1) {
    console.log('Interval on ' + (clickValue-1) + ' click cleared');
  }
}

每次点击这里的值都是新的。

Answer 3

var clickValue = 0;
var lastId = null;

function func() {
  // clear last interval
  clearInterval(lastId);
  console.log('Interval on ' + clickValue + ' click cleared')
  
  clickValue++;
  console.log(clickValue + ' click');
 // start new interval
  var value = 0;
  lastId = setInterval(function () {
    value++;
    console.log('value: ' + value);
  }, 2000)
  
}

<button onclick="func()">click</button>

第二个区间值生成后如何清除第一个区间值

How to clear the first interval value after the second interval value is generated

javascript

setinterval

clearinterval