为什么我已经设表先关了，但是图片变化还是越来越快
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img { height: 120px; } </style></head>
<body> <div id="box"></div> <script> // 建一个红绿灯类
function HongLv() { this.color = 1; this.init(); this.bingEvent(); } var box = document.getElementById('box'); HongLv.prototype.init = function() { this.dom = document.createElement('img'); this.dom.src = 'images/' + this.color + '.jpg'; box.appendChild(this.dom) } HongLv.prototype.bingEvent = function() { var self = this; this.dom.onload = function() { var timer; clearInterval(timer); timer = setInterval(function() { self.color = parseInt(Math.random() * (4 - 1) + 1);
// if (self.color == 4) { // self.color = 1; // } self.huan(); }, 1000)
} } HongLv.prototype.huan = function() { this.dom.src = 'images/' + this.color + '.jpg'; } var count = 50; while (count--) { new HongLv(); }
function suiji(a, b) {
} </script></body>
</html>
正在回答
同学你好，在onload事件中声明timer变量，那么每调用一次bingEvent方法，timer就会声明一次。而clearInterval清除的是新声明的，并不是上一次，所以定时器会叠加，变化越来越快。
‘好帮手慕赵’老师的意思是通过this作为属性，都通过this.timer进行定时器操作，就不会叠加了。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星