Javascript点击开始/停止间隔功能

Question

我想在用户单击按钮时启动间隔/功能，并在用户单击停止时停止它。但不知何故，它立即启动了 startRecord 函数。我做错了什么。

HTML:

window.onload = startRecord;

startRecord = document.getElementById('startRecord');
stopRecord = document.getElementById('stopRecord');

function startRecord() {
  startRecord.onclick = generateImg(true);
  startRecord.style.display = "none";
  stopRecord.style.display = "block";
}

function stopRecord() {
  stopRecord.onclick = generateImg(false);
  startRecord.style.display = "block";
  stopRecord.style.display = "none";
}

function generateImg(start) {
  if (start) {
    var startInterval = setInterval(function() {
      console.log("foo")
    }, 1000);
  } else {
    clearInterval(startInterval);
    console.log("stop foo")
  }
}

<div class="btn-group">
  <button type="button" class="btn btn-default btn-lg" id="startRecord">
            <a href="#" class="btn btn-default glyphicon glyphicon-hand-up">Start</a>
        </button>
  <button type="button" class="btn btn-default btn-lg" id="stopRecord">
            <a href="#" class="btn btn-default glyphicon glyphicon-hand-up">Stop</a>
        </button>
</div>

Answer 1

您需要在全局范围内定义 var startInterval。

startRecordButton = document.getElementById('startRecord');
stopRecordButton = document.getElementById('stopRecord');
startRecordButton.onclick = startRecord;
stopRecordButton.onclick = stopRecord;

var startInterval;

function startRecord() {
  generateImg(true);
  startRecord.style.display = "none";
  stopRecord.style.display = "block";
}

function stopRecord() {
  generateImg(false);
  startRecord.style.display = "block";
  stopRecord.style.display = "none";
}

function generateImg(start) {
  if (start) {
    startInterval = setInterval(function() {
      console.log("foo")
    }, 1000);
  } else {
    clearInterval(startInterval);
    console.log("stop foo")
  }
}

Answer 2

去掉onload事件，直接绑定按钮。查看节点片段。

btnStartRecord = document.getElementById('startRecord');
btnStopRecord = document.getElementById('stopRecord');

window.onload = function() {
  btnStartRecord.style.display = "block";
  btnStopRecord.style.display = "none";
}

var startInterval;



function startRecord() {
  generateImg(true);
  btnStartRecord.style.display = "none";
  btnStopRecord.style.display = "block";
}

function stopRecord() {
  generateImg(false);
  btnStartRecord.style.display = "block";
  btnStopRecord.style.display = "none";
}

function generateImg(start) {
  if (start) {
    startInterval = setInterval(function() {
      console.log("foo")
    }, 1000);
  } else {
    clearInterval(startInterval);
    console.log("stop foo")
  }
}

<div class="btn-group">
  <button type="button" onclick="startRecord()" class="btn btn-default btn-lg" id="startRecord">
            <a href="#" class="btn btn-default glyphicon glyphicon-hand-up">Start</a>
        </button>
  <button type="button" onclick="stopRecord()" class="btn btn-default btn-lg" id="stopRecord">
            <a href="#" class="btn btn-default glyphicon glyphicon-hand-up">Stop</a>
        </button>
</div>

Answer 3

您的代码有问题：

你的变量名和函数名相同：

startRecord = document.getElementById('startRecord');
function startRecord() {

随着变量被提升，startRecord 将保留最后分配的值。

使用 onclick = function 不是个好主意。每个赋值都会替换以前的值。请改用 .addEventListener。
您正在更新 startRecord 和 endRecord 上的 UI 状态，但是在单击时，这些函数不会被调用。使用一个函数在一个函数中完成所有这些并将其用作事件处理程序。
startInterval 是局部变量。所以当你点击停止时，它就失去了作用域。将其定义为全局变量。

示例代码

var startInterval = null;

var startRecordBtn = document.getElementById('startRecord');
var stopRecordBtn = document.getElementById('stopRecord');

function registerEvents(){
  startRecordBtn.addEventListener("click", startRecord);
  stopRecordBtn.addEventListener("click", stopRecord);
}

function startRecord() {
  generateImg(true);
  startRecordBtn.style.display = "none";
  stopRecordBtn.style.display = "block";
}

function stopRecord() {
  generateImg(false);
  startRecordBtn.style.display = "block";
  stopRecordBtn.style.display = "none";
}

function generateImg(start) {
  if (start) {
    startInterval = setInterval(function() {
      console.log("foo")
    }, 1000);
  } else {
    clearInterval(startInterval);
    console.log("stop foo")
  }
}

registerEvents();
window.addEventListener("load", startRecord);

<div class="btn-group">
  <button type="button" class="btn btn-default btn-lg" id="startRecord">
    <a href="#" class="btn btn-default glyphicon glyphicon-hand-up">Start</a>
  </button>
  <button type="button" class="btn btn-default btn-lg" id="stopRecord">
    <a href="#" class="btn btn-default glyphicon glyphicon-hand-up">Stop</a>
  </button>
</div>

Javascript点击开始/停止间隔功能

Javascript click start / stop interval function

javascript

setinterval

clearinterval