使用setInterval实现参数添加，每5秒添加10个，但结果序列非常奇怪
使用setInterval实现参数添加，每5秒添加10个，但结果序列非常奇怪
提问于 2018-03-17 18:05:25
我使用setInterval实现参数mytime 10，每5秒添加一次。
例如，我希望得到一个像1 11 21 31 41这样的结果列表.
但真正的结果序列是1 11 31 71 151 311.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<div id="app-6">
{{ aaa() }}
</div>
</body>
</html>
<script>
var app6 = new Vue({
el: '#app-6',
data: {
mytime: 1
},
methods: {
aaa: function() {
setInterval(() => {
this.bbb()
}, 5000);
return this.mytime;
},
bbb: function() {
this.mytime = this.mytime + 10;
},
}
})
</script>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-03-17 18:29:09
每次重新呈现时，它都会再次调用aaa()。每次调用这个函数时，它都会设置一个新的定时器。
每次设置计时器时，它都会添加多次：
- 最初它添加了
10(因为只有一个定时器)，但是第一个添加会再次触发aaa()，这会创建一个额外的计时器 - 因此，当另一个5s通过时，现在有两个定时器，每个定时器都添加
10，从11一直到31。但是这种改变也会触发aaa()，它也会创建新的计时器，而且这种情况还在继续.
解决方案:我的建议是将{{ mytime }}添加到模板中，并只在created()生命周期挂钩时触发setInterval()。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<div id="app-6">
{{ mytime }}
</div>
<script>
var app6 = new Vue({
el: '#app-6',
data: {
mytime: 1
},
created() {
setInterval(() => {
this.bbb()
}, 5000);
},
methods: {
bbb: function() {
this.mytime = this.mytime + 10;
},
}
})
</script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49340207
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号