refactor(area): use requestAnimationFrame instead of setTimeout (#3522)

packages/area/index.ts

@@ -1,6 +1,7 @@
 import { VantComponent } from '../common/component';
 import { pickerProps } from '../picker/shared';
 import { Weapp } from 'definitions/weapp';
+import { requestAnimationFrame } from '../common/utils';
 
 type AreaItem = {
   name: string;
@@ -19,21 +20,21 @@ VantComponent({
       observer(value: string) {
         this.code = value;
         this.setValues();
-      }
+      },
     },
     areaList: {
       type: Object,
       value: {},
-      observer: 'setValues'
+      observer: 'setValues',
     },
     columnsNum: {
       type: null,
       value: 3,
       observer(value: number) {
         this.setData({
-          displayColumns: this.data.columns.slice(0, +value)
+          displayColumns: this.data.columns.slice(0, +value),
         });
-      }
+      },
     },
     columnsPlaceholder: {
       type: Array,
@@ -42,23 +43,23 @@ VantComponent({
           typeToColumnsPlaceholder: {
             province: val[0] || '',
             city: val[1] || '',
-            county: val[2] || ''
-          }
+            county: val[2] || '',
+          },
         });
-      }
-    }
+      },
+    },
   },
 
   data: {
     columns: [{ values: [] }, { values: [] }, { values: [] }],
     displayColumns: [{ values: [] }, { values: [] }, { values: [] }],
-    typeToColumnsPlaceholder: {}
+    typeToColumnsPlaceholder: {},
   },
 
   mounted() {
-    setTimeout(() => {
+    requestAnimationFrame(() => {
       this.setValues();
-    }, 0);
+    });
   },
 
   methods: {
@@ -109,7 +110,7 @@ VantComponent({
         this.$emit('change', {
           picker,
           values: this.parseOutputValues(picker.getValues()),
-          index
+          index,
         });
       });
     },
@@ -127,9 +128,9 @@ VantComponent({
       }
 
       const list = this.getConfig(type);
-      result = Object.keys(list).map(code => ({
+      result = Object.keys(list).map((code) => ({
         code,
-        name: list[code]
+        name: list[code],
       }));
 
       if (code) {
@@ -138,7 +139,7 @@ VantComponent({
           code = '9';
         }
 
-        result = result.filter(item => item.code.indexOf(code) === 0);
+        result = result.filter((item) => item.code.indexOf(code) === 0);
       }
 
       if (typeToColumnsPlaceholder[type] && result.length) {
@@ -151,7 +152,7 @@ VantComponent({
             : COLUMNSPLACEHOLDERCODE.slice(4, 6);
         result.unshift({
           code: `${code}${codeFill}`,
-          name: typeToColumnsPlaceholder[type]
+          name: typeToColumnsPlaceholder[type],
         });
       }
 
@@ -236,7 +237,7 @@ VantComponent({
 
     getValues() {
       const picker = this.getPicker();
-      return picker ? picker.getValues().filter(value => !!value) : [];
+      return picker ? picker.getValues().filter((value) => !!value) : [];
     },
 
     getDetail() {
@@ -246,7 +247,7 @@ VantComponent({
         country: '',
         province: '',
         city: '',
-        county: ''
+        county: '',
       };
 
       if (!values.length) {
@@ -270,6 +271,6 @@ VantComponent({
     reset(code) {
       this.code = code || '';
       return this.setValues();
-    }
-  }
+    },
+  },
 });

packages/calendar/index.ts

@@ -12,6 +12,7 @@ import {
 } from './utils';
 
 import Toast from '../toast/toast';
+import { requestAnimationFrame } from '../common/utils';
 
 VantComponent({
   props: {
@@ -172,7 +173,7 @@ VantComponent({
     },
 
     scrollIntoView() {
-      setTimeout(() => {
+      requestAnimationFrame(() => {
         const {
           currentDate,
           type,
@@ -197,7 +198,7 @@ VantComponent({
 
           return false;
         });
-      }, 100);
+      });
     },
 
     onOpen() {

packages/notice-bar/index.ts

@@ -1,5 +1,6 @@
 import { VantComponent } from '../common/component';
 import { Weapp } from 'definitions/weapp';
+import { requestAnimationFrame } from '../common/utils';
 
 VantComponent({
   props: {
@@ -48,7 +49,7 @@ VantComponent({
     color: String,
     backgroundColor: String,
     background: String,
-    wrapable: Boolean
+    wrapable: Boolean,
   },
 
   data: {
@@ -112,14 +113,14 @@ VantComponent({
           .export(),
       });
 
-      setTimeout(() => {
+      requestAnimationFrame(() => {
         this.setData({
           animationData: this.animation
             .translateX(-this.contentWidth)
             .step()
             .export(),
         });
-      }, 20);
+      });
 
       this.timer = setTimeout(() => {
         this.scroll();