Question

<html>
<head>
  <meta charset="utf-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" ></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    div#app { padding: 30px; margin: 30px auto; width: 300px; text-align: center;
      border: 1px solid #ccc; box-shadow: 3px 3px 3px #aaa; }
    div#time { font-size: 25pt; padding: 5px; margin: 0px auto; background: #ccc;
      width: 200px; border: 1px solid black; }
  </style>
</head>

我在 vue.js 中使用 moment() 方法有一个可以工作的 10 秒倒计时计时器，但很少有事情仍然无法正常工作。我想在距当前时间 10 秒后设置 clearInterval，但它永远不会停止。我尝试了变量 'count' 和 clearInterval()。有人可以帮忙吗？

<body>
  <div id="app">
    <h1>counter1</h1>
    <div id="time">{{ time }}</div>
  </div>

<script type="text/javascript">
    var count=0;
    var app = new Vue({
      el: '#app',
      data: {
        time: "0",
        count:0
      },
      mounted() {
          this.startTime = moment();
          let callback = () => {
            let time_diff = moment().diff(this.startTime);
            this.time = moment.utc(time_diff).format("s");
            this.running=true;
            

            
          };
        let interval= () =>{ setInterval(callback, 1000);
            ++count;
            if(count==10) clearInterval(interval);
        }

          interval();
         
        }
    })
   </script>

Answer 1

您像这样定义间隔：

let interval= () =>{ setInterval(callback, 1000);

interval 包含一个围绕 setInterval 敲击的函数。要取消 intenrval，我们需要分配结果值，而不是在更深的函数中。

删除函数后，它看起来像这个工作演示：

var count=0;
var app = new Vue({
    el: '#app',
    data: {
        time: "0",
        count:0
    },
    mounted() {

        // Create startTime
        this.startTime = moment();

        // Define callback
        let callback = () => {

            // Calculate time diff
            let time_diff = moment().diff(this.startTime);
            this.time = moment.utc(time_diff).format("s");
            this.running=true;

            // Bumb counter
            ++count;

            // Clear interval on count==10
            if (count==10) clearInterval(interval);
        };

        // Start interval
        let interval = setInterval(callback, 1000);
    }
})

div#app  { padding: 30px; margin: 30px auto; width: 300px; text-align: center; border: 1px solid #ccc; box-shadow: 3px 3px 3px #aaa; }
div#time { font-size: 25pt; padding: 5px; margin: 0px auto; background: #ccc; width: 200px; border: 1px solid black; }

/* Hide console wrapper */
.as-console-wrapper { display: none !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <h1>counter1</h1>
  <div id="time">{{ time }}</div>
</div>

Answer 2

我们应该清除setInterval返回的间隔ID，如下所示：

<script type="text/javascript">
    var count=0;
    var app = new Vue({
      el: '#app',
      data: {
        time: "0",
        count:0
      },
      mounted() {
          this.startTime = moment();

          let interval;
          let callback = () => {
            let time_diff = moment().diff(this.startTime);
            this.time = moment.utc(time_diff).format("s");
            this.running=true;

            ++count;
            if(count == 10) clearInterval(interval);            
          };

          interval = setInterval(callback, 1000)
    })
</script>

您可以从 WindowOrWorkerGlobalScope.setInterval() 获取更多信息。

10 秒倒计时计时器 / vue.js

2 个答案: