函数不能多次调用
函数不能多次调用
提问于 2019-05-23 03:05:35
StopBtn不能调用两次
一旦这个函数被调用，它就会保持不变，不起作用，我也得到了一个错误，告诉我定时器不是一个对象。我真的不知道问题出在哪里
var timer = setInterval(clock, 1000);
function clock() {
var date = new Date();
var time = date.toLocaleTimeString();
document.getElementById("time").innerHTML = "The Current time is > " + time;
}
var startBtn = document.getElementById("start");
var stopBtn = document.getElementById("stop");
stopBtn.addEventListener("click", stopTime);
function stopTime() {
var stoptime = clearInterval(timer);
console.log("Stop");
}
startBtn.addEventListener("click", startTime);
function startTime() {
var starttime = setInterval(clock, 1000);
console.log("hello");
}
<html>
<head>
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai&display=swap" rel="stylesheet" />
</head>
<body>
<button id="stop">STOP TIME</button>
<button id="start">START TIME</button>
<h1 id="h1">We are Coding JavaScript</h1>
<h3>Keep On Practicing Dude!</h3>
<div id="time"></div>
<script src="script.js"></script>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-23 03:14:57
在startTime函数中，您设置了一个与计时器关联的新变量。stopTime函数不使用该变量，因此它不会在按下Start按钮后停止计时器。
只需在计时器的整个代码中重复使用一个变量。
备注：
你实际上得到了一个比所需的更复杂的解决方案。不需要启动时钟的clock()函数和调用clock函数的startTime函数，因为它们都需要做同样的事情。
不使用setInterval()，而使用setTimeout (这是一个一次性计时器)，但将计时器放在start函数中，以便它成为递归的。
当您要获取/设置的字符串不包含任何超文本标记语言时，不要使用.innerHTML，因为.innerHTML具有安全性和性能含义。在处理DOM元素字符串时使用.textContent。
对于要反复使用的元素，只需扫描DOM一次。
var startBtn = document.getElementById("start");
var stopBtn = document.getElementById("stop");
var clock = document.getElementById("currentTime");
startBtn.addEventListener("click", startClock);
stopBtn.addEventListener("click", stopClock);
// This one variable will represent the timer
// throughout the code
var timer = null;
function startClock() {
var now = new Date();
var time = now.toLocaleTimeString();
clock.textContent = "The Current time is > " + time;
timer = setTimeout(startClock, 1000)
}
function stopClock() {
clearTimeout(timer);
console.log("Stop");
}
startClock();<button id="stop">STOP TIME</button>
<button id="start">START TIME</button>
<div id="currentTime"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56263400
复制相关文章
相似问题