fix(CountDown): infinite tick if call reset after finish (#5340)

src/count-down/README.md

@@ -79,7 +79,7 @@ export default {
   :time="3000"
   :auto-start="false"
   format="ss:SSS"
-  @finish="finished"
+  @finish="finish"
 />
 <van-grid clickable :column-num="3">
   <van-grid-item text="Start" icon="play-circle-o" @click="start" />

src/count-down/README.zh-CN.md

@@ -89,7 +89,7 @@ export default {
   :time="3000"
   :auto-start="false"
   format="ss:SSS"
-  @finish="finished"
+  @finish="finish"
 />
 <van-grid clickable>
   <van-grid-item text="开始" icon="play-circle-o" @click="start" />

src/count-down/demo/index.vue

@@ -5,24 +5,15 @@
     </demo-block>
 
     <demo-block :title="$t('customFormat')">
-      <van-count-down
+      <van-count-down :time="time" :format="$t('formatWithDay')" />
-        :time="time"
-        :format="$t('formatWithDay')"
-      />
     </demo-block>
 
     <demo-block :title="$t('millisecond')">
-      <van-count-down
+      <van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
-        millisecond
-        :time="time"
-        format="HH:mm:ss:SS"
-      />
     </demo-block>
 
     <demo-block :title="$t('customStyle')">
-      <van-count-down
+      <van-count-down :time="time">
-        :time="time"
-      >
         <template v-slot="currentTime">
           <span class="item">{{ currentTime.hours }}</span>
           <span class="item">{{ currentTime.minutes }}</span>
@@ -40,10 +31,7 @@
         format="ss:SSS"
         @finish="$toast($t('finished'))"
       />
-      <van-grid
+      <van-grid clickable :column-num="3">
-        clickable
-        :column-num="3"
-      >
         <van-grid-item
           icon="play-circle-o"
           :text="$t('start')"
@@ -54,11 +42,7 @@
           :text="$t('pause')"
           @click="pause"
         />
-        <van-grid-item
+        <van-grid-item icon="replay" :text="$t('reset')" @click="reset" />
-          icon="replay"
-          :text="$t('reset')"
-          @click="reset"
-        />
       </van-grid>
     </demo-block>
   </demo-section>

src/count-down/index.js

@@ -64,6 +64,7 @@ export default createComponent({
   },
 
   methods: {
+    // @exposed-api
     start() {
       if (this.counting) {
         return;
@@ -74,11 +75,13 @@ export default createComponent({
       this.tick();
     },
 
+    // @exposed-api
     pause() {
       this.counting = false;
       cancelRaf(this.rafId);
     },
 
+    // @exposed-api
     reset() {
       this.pause();
       this.remain = this.time;
@@ -98,9 +101,15 @@ export default createComponent({
 
     microTick() {
       this.rafId = raf(() => {
+        /* istanbul ignore if */
+        // in case of call reset immediately after finish
+        if (!this.counting) {
+          return;
+        }
+
         this.setRemain(this.getRemain());
 
-        if (this.remain !== 0) {
+        if (this.remain > 0) {
           this.microTick();
         }
       });
@@ -108,13 +117,19 @@ export default createComponent({
 
     macroTick() {
       this.rafId = raf(() => {
+        /* istanbul ignore if */
+        // in case of call reset immediately after finish
+        if (!this.counting) {
+          return;
+        }
+
         const remain = this.getRemain();
 
         if (!isSameSecond(remain, this.remain) || remain === 0) {
           this.setRemain(remain);
         }
 
-        if (this.remain !== 0) {
+        if (this.remain > 0) {
           this.macroTick();
         }
       });