代码之家 › 专栏 › 技术社区 › zephyr.mao

使用setInterval每5秒增加10个参数,但结果顺序非常奇怪

setinterval vue.js

zephyr.mao · 技术社区 · 8 年前

我用 setInterval 实现参数mytime add 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 回复 | 直到 8 年前

acdcjunior Mukul Kumar 8 年前

每次重新渲染时,它都会调用 aaa() 再一次每次调用此函数时,它都会设置一个新的计时器。

每次设置计时器时,它都会添加多次:

起初,它增加了 10 (因为只有一个计时器),但这是第一次添加触发器 aaa() 同样,这会创建一个额外的计时器
因此,当另一个5秒过去时,现在有两个计时器 10 每个,这个 11 到 31 直的但这种变化也会引发 aaa() 这也创造了新的计时器。。。

解决方案: 我的建议是你加上 {{ mytime }} 到模板并触发一个 setInterval() 仅在 created() 生命周期挂钩。

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

推荐文章

Brian Millot · 计时器不会以clearInterval停止

4 年前

AdRock · 延迟对象中的jquery间隔

8 年前

sqlchild · setInterval函数不停止但无限运行

8 年前

zephyr.mao · 使用setInterval每5秒增加10个参数,但结果顺序非常奇怪

8 年前

Madpop · 如何使用角度2停止设置间隔闪烁+

8 年前

shubham saurabh · 如何在reactjs中的setInterval内返回JSX

8 年前

Manoj Bhardwaj · 我想更改progressBarProgress值

8 年前

Orhan Gazi · 重置并重复设置间隔

8 年前

user9317722 · 记分板上的Javascript计时器在0后变为-1

8 年前

Alexis Brunet · NodeJS-无限调用承诺函数

8 年前