Question

如果用户点击按钮我想启动间隔/功能，如果用户点击停止则停止。但不知怎的，它不知不觉地启动了startRecord功能。我做错了什么。

HTML：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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事件，将事件直接绑定到按钮。请参阅节点代码段。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

您的代码问题：

您的变量名称和函数名称相同：

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

当变量被提升时，startRecord将保留最后指定的值。

使用onclick = function是一个坏主意。每项任务都将取代以前的值。请改用.addEventListener。
您正在更新startRecord和endRecord上的UI状态，但点击后，系统不会调用这些功能。使用函数在一个函数中执行所有操作并将其用作事件处理程序。
startInterval是一个局部变量。所以当你点击停止时，它已经失去了它的范围。将其定义为全局变量。

示例代码

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案: