个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我在理解如何在类中使用 setInterval() 和 clearInterval() 时遇到问题。我正在尝试构建一个从 0 开始的计时器，直到我决定停止它。
到目前为止，我设法拥有一种方法，当您调用它时，计时器会启动，但当我尝试暂停它时，它只会忽略我的方法并继续。
HTML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="container">
<p id="timer">im here</p>
</div>
<button>Start/Stop Timer</button>
<button>Reset Timer</button>
<script src="script.js"></script>
</body>
</html>
JS
class Timer {
constructor(){
this.isRunning = false;
this.currTimer = 0;
this.runTimer;
var timer = document.getElementById('timer');
}
start(){
this.isRunning = true;
if (this.isRunning) {
var currentTime = this.currTimer;
this.runTimer = setInterval(function(){
timer.innerHTML = ++currentTime;
},1000)
}
}
pause(){
this.isRunning = false;
if (this.isRunning = false) {
clearInterval(this.runTimer)
}
}
}
var test = new Timer();
test.start();
test.pause();// put this after a few seconds
我也很确定我用错了“this”。我刚刚学习了这些新东西并尝试构建它。
最佳答案
如果你想在构造对象后使用它，你的timer局部变量需要改为属性，所以在构造函数中，改变
var timer = document.getElementById('timer');
到
this.timer = document.getElementById('timer');
然后在 start 中，您还需要使用 this.timer — 这意味着您要使用箭头函数，而不是一个传统函数，用于 setInterval 回调，以便函数在 this 上关闭。您可能想直接使用 this.currTimer 而不是将其复制到变量:
this.runTimer = setInterval(() => {
this.timer.innerHTML = ++this.currTimer;
},1000);
那里的逻辑也需要调整:您刚刚将 true 分配给 this.isRunning，因此之后无需检查它。但实际上，您想事先检查一下:
start(){
if (!this.isRunning) {
this.isRunning = true;
this.runTimer = setInterval(() => {
this.timer.innerHTML = ++this.currTimer;
},1000);
}
}
你还需要使用 == 或 ===，而不是 =，当做这样的比较时:
if (this.isRunning = false) { // Needs == or ===
但是 pause 中的逻辑有一个问题:你刚刚将 this.isRunning 设置为 false，所以在下一个检查它线，它永远是假的。相反，在分配给它之前检查它。此外，仅使用 if (flag) 或 if (!flag) 而不是使用 == true 或 == false:
pause(){
if (this.isRunning) {
clearInterval(this.runTimer)
this.isRunning = false;
}
}
似乎适用于这些更改:
class Timer {
constructor() {
this.isRunning = false;
this.currTimer = 0;
this.runTimer;
this.timer = document.getElementById('timer');
}
start() {
if (!this.isRunning) {
this.isRunning = true;
this.runTimer = setInterval(() => {
this.timer.innerHTML = ++this.currTimer;
}, 1000);
}
}
pause() {
if (this.isRunning) {
clearInterval(this.runTimer);
this.isRunning = false;
}
}
}
var test = new Timer();
test.start();
setTimeout(function() {
test.pause(); // put this after a few seconds
}, 4000);<div id="timer"></div>我还强烈建议始终如一地使用 ;(例如在调用 setInterval 之后)。 JavaScript 具有自动分号插入 (ASI)，因此即使您没有，它也会像您在某些地方包含分号一样工作，但您不能依赖它，除非您对ASI规则。
关于javascript - 在类中使用 setInterval() 和 clearInterval()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50618626/
27
4
0
这个问题已经有答案了: JavaScript closure inside loops – simple practical example (45 个回答) 已关闭 8 年前。 我试图创建多个 se
这是我的情况，我需要加快函数运行时间，所以 setInterval 不是一个明智的选择，对吧？因为每次至少要花费 4 毫秒。 所以，我可以将 setInterval 函数更改为 requestAnim
我正在尝试下面的代码，看看是否可以将 setInterval Id 存储为关联数组中唯一键的值，然后通过使用唯一值作为键来停止被调用函数中的间隔，如下所示我将 setInterval Id 作为它的值
我花了很长时间试图弄清楚如何使用具有 CSS 样式缓动功能的 Google Maps API 为折线上的符号设置动画。我让它工作 with this Gist和 this Google Maps AP
我是这里的 JS 新手，正在研究一个在给定时间段后开始的倒数计时器。基本上，当用户单击按钮时时钟开始，第二个时钟在第一个计时器用完时开始。我知道“setInterval”是完成这个的最好方法。我面临的
嗨， friend 们，我想只使用一个 setInterval 函数来运行我的代码。目前我正在使用两个 setInterval's 来实现我的目标，我们可以只使用一个 'setInterval' 来获
我的“setInterval”函数有问题，我想在将鼠标悬停在 div 上时启动该函数，但是 setInterval 在我将鼠标悬停在 div 上时第一次起作用=>如果我停留在div，它不会继续改变图片
我想展示两次:一次在你的国家，一次在日本用JS 问题是第二个 setInterval 停止了第一个，我不知道如何进行两次运行。 完整代码 In your region:
好吧，这个问题有几个问题。 首先，我要求 setTimeout() 和 setInterval() 我见过几种不同的调用方式，我想知道哪种方式最适合这种情况。 我正在制作一个 js/canvas 游戏
setInterval(function () { //======= //code //======== if(--timer&etype="; } },1000); 这里定时器结束后，而不是重定
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 5 年前。 Improv
我的前老板有一个 weird bug where when he used setInterval with a long delay interval : setInterval(func, 300
这个问题已经有答案了: How does the "this" keyword work, and when should it be used? (22 个回答) How to access the
我的印象是 setInterval("/*some code*/", time) 相当于 setInterval(function() { /*some code*/ }, time) 显然不是
我对 JavaScript 和 NodeJS 非常陌生，我只是想了解 NodeJS 中的发射器模式。当我尝试使用 setInterval 函数每秒发出一个刻度事件时，程序似乎工作正常:-
我有一个简单的 setTimeout 函数，它在特定时间运行并且工作正常: var now = new Date(); var milliTillExec = new Date(now.getFull
在本教程中，您将借助示例了解 JavaScript setInterval() 方法。 在 JavaScript 中，可以在指定的时间间隔内执行一段代码。这些时间间隔称为定时事件。 有
Js: function cometConnect(){ $.ajax({ cache:false, type:"post", d
LE2。关于如何解决此问题的任何其他想法？ 我有这段代码，但不知道为什么不能正常工作: $(function autorun() { if ($("#contactForm").is(":visibl
这个问题在这里已经有了答案: How to make a setInterval stop after some time or after a number of actions? (6 个答案)
我是一名优秀的程序员,十分优秀！