From 9d4064eaeb3dbca547b2ab0307066c2081ec986a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=A6=82=E6=91=B8=E9=B1=BC=E5=8E=BB?=
 <1780903673@qq.com>
Date: Sat, 30 Nov 2024 14:47:05 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E2=99=BB=EF=B8=8F=20=20=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E4=BD=BF=E7=94=A8=20requestAnimationFrame=20=E7=9A=84?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=E4=BF=AE=E5=A4=8D=E5=BE=AE=E4=BF=A1=E5=B0=8F?=
 =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E6=8A=A5=E9=94=99=E6=96=B9=E6=B3=95=E9=87=8D?=
 =?UTF-8?q?=E5=A4=8D=E5=AE=9A=E4=B9=89=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: $549
---
 .../wot-design-uni/components/common/util.ts  |  2 +-
 .../monthPanel/month-panel.vue                | 46 +++++++-------
 .../wd-calendar-view/yearPanel/year-panel.vue | 44 +++++++-------
 .../components/wd-calendar/wd-calendar.vue    | 11 ++--
 .../wd-collapse-item/wd-collapse-item.vue     | 23 ++++---
 .../components/wd-index-bar/wd-index-bar.vue  |  9 ++-
 .../components/wd-input/wd-input.vue          | 23 ++++---
 .../components/wd-search/wd-search.vue        | 60 +++++++------------
 .../components/wd-segmented/wd-segmented.vue  |  9 ++-
 .../wd-select-picker/wd-select-picker.vue     | 41 ++++++-------
 .../components/wd-sticky/wd-sticky.vue        | 13 ++--
 .../components/wd-textarea/wd-textarea.vue    | 23 ++++---
 .../wd-transition/wd-transition.vue           | 12 ++--
 13 files changed, 144 insertions(+), 172 deletions(-)

diff --git a/src/uni_modules/wot-design-uni/components/common/util.ts b/src/uni_modules/wot-design-uni/components/common/util.ts
index a638f49f5..1f21718c2 100644
--- a/src/uni_modules/wot-design-uni/components/common/util.ts
+++ b/src/uni_modules/wot-design-uni/components/common/util.ts
@@ -443,7 +443,7 @@ export const requestAnimationFrame = (cb = () => {}) => {
  * @param ms 延迟时间
  * @returns
  */
-export const pause = (ms: number) => {
+export const pause = (ms: number = 1000 / 30) => {
   return new AbortablePromise((resolve) => {
     const timer = setTimeout(() => {
       clearTimeout(timer)
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue b/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue
index 56dc2ef84..dbcbf5198 100644
--- a/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue
@@ -63,7 +63,7 @@ export default {
 <script lang="ts" setup>
 import wdPickerView from '../../wd-picker-view/wd-picker-view.vue'
 import { computed, ref, watch, onMounted } from 'vue'
-import { debounce, isArray, isEqual, isNumber, requestAnimationFrame } from '../../common/util'
+import { debounce, isArray, isEqual, isNumber, pause } from '../../common/util'
 import { compareMonth, formatMonthTitle, getMonthEndDay, getMonths, getTimeData, getWeekLabel } from '../utils'
 import Month from '../month/month.vue'
 import { monthPanelProps, type MonthInfo, type MonthPanelTimeType, type MonthPanelExpose } from './types'
@@ -185,31 +185,31 @@ onMounted(() => {
 /**
  * 使当前日期或者选中日期滚动到可视区域
  */
-function scrollIntoView() {
-  requestAnimationFrame(() => {
-    let activeDate: number | null = 0
-    if (isArray(props.value)) {
-      activeDate = props.value![0]
-    } else if (isNumber(props.value)) {
-      activeDate = props.value
-    }
+async function scrollIntoView() {
+  // 等待渲染完毕
+  await pause()
+  let activeDate: number | null = 0
+  if (isArray(props.value)) {
+    activeDate = props.value![0]
+  } else if (isNumber(props.value)) {
+    activeDate = props.value
+  }
 
-    if (!activeDate) {
-      activeDate = Date.now()
-    }
+  if (!activeDate) {
+    activeDate = Date.now()
+  }
 
-    let top: number = 0
-    for (let index = 0; index < months.value.length; index++) {
-      if (compareMonth(months.value[index].date, activeDate) === 0) {
-        break
-      }
-      top += months.value[index] ? Number(months.value[index].height) : 0
+  let top: number = 0
+  for (let index = 0; index < months.value.length; index++) {
+    if (compareMonth(months.value[index].date, activeDate) === 0) {
+      break
     }
-    scrollTop.value = 0
-    requestAnimationFrame(() => {
-      scrollTop.value = top
-    })
-  })
+    top += months.value[index] ? Number(months.value[index].height) : 0
+  }
+  scrollTop.value = 0
+  // 等待渲染完毕
+  await pause()
+  scrollTop.value = top
 }
 /**
  * 获取时间 picker 的数据
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue b/src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue
index 9cb78455b..d7a763983 100644
--- a/src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue
@@ -33,7 +33,7 @@ export default {
 <script lang="ts" setup>
 import { computed, ref, onMounted } from 'vue'
 import { compareYear, formatYearTitle, getYears } from '../utils'
-import { isArray, isNumber, requestAnimationFrame } from '../../common/util'
+import { isArray, isNumber, pause } from '../../common/util'
 import Year from '../year/year.vue'
 import { yearPanelProps, type YearInfo, type YearPanelExpose } from './types'
 
@@ -68,31 +68,29 @@ onMounted(() => {
   scrollIntoView()
 })
 
-function scrollIntoView() {
-  requestAnimationFrame(() => {
-    let activeDate: number | null = null
-    if (isArray(props.value)) {
-      activeDate = props.value![0]
-    } else if (isNumber(props.value)) {
-      activeDate = props.value
-    }
+async function scrollIntoView() {
+  await pause()
+  let activeDate: number | null = null
+  if (isArray(props.value)) {
+    activeDate = props.value![0]
+  } else if (isNumber(props.value)) {
+    activeDate = props.value
+  }
 
-    if (!activeDate) {
-      activeDate = Date.now()
-    }
+  if (!activeDate) {
+    activeDate = Date.now()
+  }
 
-    let top: number = 0
-    for (let index = 0; index < years.value.length; index++) {
-      if (compareYear(years.value[index].date, activeDate) === 0) {
-        break
-      }
-      top += years.value[index] ? Number(years.value[index].height) : 0
+  let top: number = 0
+  for (let index = 0; index < years.value.length; index++) {
+    if (compareYear(years.value[index].date, activeDate) === 0) {
+      break
     }
-    scrollTop.value = 0
-    requestAnimationFrame(() => {
-      scrollTop.value = top
-    })
-  })
+    top += years.value[index] ? Number(years.value[index].height) : 0
+  }
+  scrollTop.value = 0
+  await pause()
+  scrollTop.value = top
 }
 
 const yearScroll = (event: { detail: { scrollTop: number } }) => {
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue b/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
index 62a3cb7c9..33e5b8620 100644
--- a/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
@@ -122,7 +122,7 @@ import wdActionSheet from '../wd-action-sheet/wd-action-sheet.vue'
 import wdButton from '../wd-button/wd-button.vue'
 import { ref, computed, watch } from 'vue'
 import { dayjs } from '../common/dayjs'
-import { deepClone, isArray, isEqual, padZero, requestAnimationFrame } from '../common/util'
+import { deepClone, isArray, isEqual, padZero, pause } from '../common/util'
 import { getWeekNumber, isRange } from '../wd-calendar-view/utils'
 import { useCell } from '../composables/useCell'
 import { FORM_KEY, type FormItemRule } from '../wd-form/types'
@@ -313,7 +313,7 @@ function scrollIntoView() {
   calendarView.value && calendarView.value && calendarView.value.$.exposed.scrollIntoView()
 }
 // 对外暴露方法
-function open() {
+async function open() {
   const { disabled, readonly } = props
 
   if (disabled || readonly) return
@@ -323,10 +323,9 @@ function open() {
   lastCalendarValue.value = deepClone(calendarValue.value)
   lastTab.value = currentTab.value
   lastCurrentType.value = currentType.value
-  requestAnimationFrame(() => {
-    scrollIntoView()
-  })
-
+  // 等待渲染完毕
+  await pause()
+  scrollIntoView()
   setTimeout(() => {
     if (props.showTypeSwitch) {
       calendarTabs.value.scrollIntoView()
diff --git a/src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue b/src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue
index 0826aec44..2f1d123ba 100644
--- a/src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue
@@ -32,7 +32,7 @@ export default {
 <script lang="ts" setup>
 import wdIcon from '../wd-icon/wd-icon.vue'
 import { computed, getCurrentInstance, onMounted, ref, watch, type CSSProperties } from 'vue'
-import { addUnit, getRect, isArray, isDef, isPromise, isString, objToStyle, requestAnimationFrame, uuid } from '../common/util'
+import { addUnit, getRect, isArray, isDef, isPromise, isString, objToStyle, pause, uuid } from '../common/util'
 import { useParent } from '../composables/useParent'
 import { COLLAPSE_KEY } from '../wd-collapse/types'
 import { collapseItemProps, type CollapseItemExpose } from './types'
@@ -103,19 +103,18 @@ async function updateExpand(useBeforeExpand: boolean = true) {
 }
 
 function initRect() {
-  getRect(`#${collapseId.value}`, false, proxy).then((rect) => {
+  getRect(`#${collapseId.value}`, false, proxy).then(async (rect) => {
     const { height: rectHeight } = rect
     height.value = isDef(rectHeight) ? Number(rectHeight) : ''
-    requestAnimationFrame(() => {
-      if (isSelected.value) {
-        expanded.value = true
-      } else {
-        expanded.value = false
-      }
-      if (!inited.value) {
-        inited.value = true
-      }
-    })
+    await pause()
+    if (isSelected.value) {
+      expanded.value = true
+    } else {
+      expanded.value = false
+    }
+    if (!inited.value) {
+      inited.value = true
+    }
   })
 }
 
diff --git a/src/uni_modules/wot-design-uni/components/wd-index-bar/wd-index-bar.vue b/src/uni_modules/wot-design-uni/components/wd-index-bar/wd-index-bar.vue
index adfba448f..d82255927 100644
--- a/src/uni_modules/wot-design-uni/components/wd-index-bar/wd-index-bar.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-index-bar/wd-index-bar.vue
@@ -27,7 +27,7 @@
 import type { AnchorIndex } from './type'
 import { indexBarInjectionKey, indexBarProps } from './type'
 import { ref, getCurrentInstance, onMounted, reactive, nextTick, watch } from 'vue'
-import { getRect, isDef, uuid, requestAnimationFrame } from '../common/util'
+import { getRect, isDef, uuid, pause } from '../common/util'
 import { useChildren } from '../composables/useChildren'
 
 const props = defineProps(indexBarProps)
@@ -131,13 +131,12 @@ function handleTouchMove(e: TouchEvent) {
   setScrollTop(getAnchorByPageY(clientY).$.exposed!.top.value - offsetTop)
 }
 
-function handleTouchEnd(e: TouchEvent) {
+async function handleTouchEnd(e: TouchEvent) {
   const clientY = e.changedTouches[0].pageY
   state.activeIndex = getAnchorByPageY(clientY).index
   setScrollTop(getAnchorByPageY(clientY).$.exposed!.top.value - offsetTop)
-  requestAnimationFrame(() => {
-    scrollState.touching = false
-  })
+  await pause()
+  scrollState.touching = false
 }
 
 function setScrollTop(top: number) {
diff --git a/src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue b/src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue
index b9b40ed2d..31706bf9e 100644
--- a/src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue
@@ -87,7 +87,7 @@ export default {
 <script lang="ts" setup>
 import wdIcon from '../wd-icon/wd-icon.vue'
 import { computed, onBeforeMount, ref, watch } from 'vue'
-import { isDef, objToStyle, pause, requestAnimationFrame } from '../common/util'
+import { isDef, objToStyle, pause } from '../common/util'
 import { useCell } from '../composables/useCell'
 import { FORM_KEY, type FormItemRule } from '../wd-form/types'
 import { useParent } from '../composables/useParent'
@@ -230,24 +230,23 @@ function formatValue(value: string | number) {
 function togglePwdVisible() {
   isPwdVisible.value = !isPwdVisible.value
 }
-function handleClear() {
+async function handleClear() {
   clearing.value = true
   focusing.value = false
   inputValue.value = ''
   if (props.focusWhenClear) {
     focused.value = false
   }
-  requestAnimationFrame(() => {
-    if (props.focusWhenClear) {
-      focused.value = true
-      focusing.value = true
-    }
-    emit('change', {
-      value: ''
-    })
-    emit('update:modelValue', inputValue.value)
-    emit('clear')
+  await pause()
+  if (props.focusWhenClear) {
+    focused.value = true
+    focusing.value = true
+  }
+  emit('change', {
+    value: ''
   })
+  emit('update:modelValue', inputValue.value)
+  emit('clear')
 }
 async function handleBlur() {
   // 等待150毫秒，clear执行完毕
diff --git a/src/uni_modules/wot-design-uni/components/wd-search/wd-search.vue b/src/uni_modules/wot-design-uni/components/wd-search/wd-search.vue
index fdfbcda15..1e313d179 100644
--- a/src/uni_modules/wot-design-uni/components/wd-search/wd-search.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-search/wd-search.vue
@@ -1,7 +1,5 @@
 <template>
   <view :class="rootClass" :style="customStyle">
-    <!--自定义label插槽-->
-    <!--搜索框主体-->
     <view class="wd-search__block">
       <slot name="prefix"></slot>
       <view class="wd-search__field">
@@ -9,9 +7,7 @@
           <wd-icon name="search" custom-class="wd-search__search-icon"></wd-icon>
           <text class="wd-search__placeholder-txt">{{ placeholder || translate('search') }}</text>
         </view>
-        <!--icon:search-->
         <wd-icon v-if="showInput || str || placeholderLeft" name="search" custom-class="wd-search__search-left-icon"></wd-icon>
-        <!--搜索框-->
         <input
           v-if="showInput || str || placeholderLeft"
           :placeholder="placeholder || translate('search')"
@@ -27,14 +23,11 @@
           :maxlength="maxlength"
           :focus="isFocused"
         />
-        <!--icon:clear-->
         <wd-icon v-if="str" custom-class="wd-search__clear wd-search__clear-icon" name="error-fill" @click="clearSearch" />
       </view>
     </view>
-    <!--the button behind input,care for hideCancel without displaying-->
 
     <slot v-if="!hideCancel" name="suffix">
-      <!--默认button-->
       <view class="wd-search__cancel" @click="handleCancel">
         {{ cancelTxt || translate('cancel') }}
       </view>
@@ -56,7 +49,7 @@ export default {
 <script lang="ts" setup>
 import wdIcon from '../wd-icon/wd-icon.vue'
 import { type CSSProperties, computed, onMounted, ref, watch } from 'vue'
-import { objToStyle, requestAnimationFrame } from '../common/util'
+import { objToStyle, pause } from '../common/util'
 import { useTranslate } from '../composables/useTranslate'
 import { searchProps } from './types'
 
@@ -110,22 +103,17 @@ const coverStyle = computed(() => {
   return objToStyle(coverStyle)
 })
 
-function hackFocus(focus: boolean) {
+async function hackFocus(focus: boolean) {
   showInput.value = focus
-  requestAnimationFrame(() => {
-    isFocused.value = focus
-  })
+  await pause()
+  isFocused.value = focus
 }
 
-function closeCover() {
+async function closeCover() {
   if (props.disabled) return
-  requestAnimationFrame()
-    .then(() => requestAnimationFrame())
-    .then(() => requestAnimationFrame())
-    .then(() => {
-      showPlaceHolder.value = false
-      hackFocus(true)
-    })
+  await pause(100)
+  showPlaceHolder.value = false
+  hackFocus(true)
 }
 /**
  * @description input的input事件handle
@@ -141,29 +129,25 @@ function inputValue(event: any) {
 /**
  * @description 点击清空icon的handle
  */
-function clearSearch() {
+async function clearSearch() {
   str.value = ''
   clearing.value = true
   if (props.focusWhenClear) {
     isFocused.value = false
   }
-  requestAnimationFrame()
-    .then(() => requestAnimationFrame())
-    .then(() => requestAnimationFrame())
-    .then(() => {
-      if (props.focusWhenClear) {
-        showPlaceHolder.value = false
-        hackFocus(true)
-      } else {
-        showPlaceHolder.value = true
-        hackFocus(false)
-      }
-      emit('change', {
-        value: ''
-      })
-      emit('update:modelValue', '')
-      emit('clear')
-    })
+  await pause(100)
+  if (props.focusWhenClear) {
+    showPlaceHolder.value = false
+    hackFocus(true)
+  } else {
+    showPlaceHolder.value = true
+    hackFocus(false)
+  }
+  emit('change', {
+    value: ''
+  })
+  emit('update:modelValue', '')
+  emit('clear')
 }
 /**
  * @description 点击搜索按钮时的handle
diff --git a/src/uni_modules/wot-design-uni/components/wd-segmented/wd-segmented.vue b/src/uni_modules/wot-design-uni/components/wd-segmented/wd-segmented.vue
index 735f631d0..77f9b0d60 100644
--- a/src/uni_modules/wot-design-uni/components/wd-segmented/wd-segmented.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-segmented/wd-segmented.vue
@@ -32,7 +32,7 @@ export default {
 
 <script setup lang="ts">
 import { computed, getCurrentInstance, onMounted, reactive, watch } from 'vue'
-import { requestAnimationFrame, getRect, isObj, objToStyle, addUnit } from '../common/util'
+import { getRect, isObj, objToStyle, addUnit, pause } from '../common/util'
 import type { CSSProperties } from 'vue'
 import { segmentedProps, type SegmentedExpose, type SegmentedOption } from './types'
 const $item = '.wd-segmented__item'
@@ -65,11 +65,10 @@ watch(
 
 const { proxy } = getCurrentInstance() as any
 
-onMounted(() => {
+onMounted(async () => {
   updateCurrentIndex()
-  requestAnimationFrame(() => {
-    updateActiveStyle(false)
-  })
+  await pause()
+  updateActiveStyle(false)
 })
 
 /**
diff --git a/src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue b/src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue
index 8bb24d51c..7526407fc 100644
--- a/src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue
@@ -128,7 +128,7 @@ import wdLoading from '../wd-loading/wd-loading.vue'
 
 import { getCurrentInstance, onBeforeMount, ref, watch, nextTick, computed } from 'vue'
 import { useCell } from '../composables/useCell'
-import { getRect, isArray, isDef, isFunction, requestAnimationFrame } from '../common/util'
+import { getRect, isArray, isDef, isFunction, pause } from '../common/util'
 import { useParent } from '../composables/useParent'
 import { FORM_KEY, type FormItemRule } from '../wd-form/types'
 import { useTranslate } from '../composables/useTranslate'
@@ -261,7 +261,7 @@ onBeforeMount(() => {
 
 const { proxy } = getCurrentInstance() as any
 
-function setScrollIntoView() {
+async function setScrollIntoView() {
   let wraperSelector: string = ''
   let selectorPromise: Promise<UniApp.NodeInfo>[] = []
   if (isDef(selectList.value) && selectList.value !== '' && !isArray(selectList.value)) {
@@ -274,27 +274,24 @@ function setScrollIntoView() {
     wraperSelector = '#wd-checkbox-group'
   }
   if (wraperSelector) {
-    requestAnimationFrame().then(() => {
-      requestAnimationFrame().then(() => {
-        Promise.all([getRect('.wd-select-picker__wrapper', false, proxy), getRect(wraperSelector, false, proxy), ...selectorPromise]).then((res) => {
-          if (isDef(res) && isArray(res)) {
-            const scrollView = res[0]
-            const wraper = res[1]
-            const target = res.slice(2) || []
-            if (isDef(wraper) && isDef(scrollView)) {
-              const index = target.findIndex((item) => {
-                return item.bottom! > scrollView.top! && item.top! < scrollView.bottom!
-              })
-              if (index < 0) {
-                scrollTop.value = -1
-                nextTick(() => {
-                  scrollTop.value = Math.max(0, target[0].top! - wraper.top! - scrollView.height! / 2)
-                })
-              }
-            }
+    await pause(2000 / 30)
+    Promise.all([getRect('.wd-select-picker__wrapper', false, proxy), getRect(wraperSelector, false, proxy), ...selectorPromise]).then((res) => {
+      if (isDef(res) && isArray(res)) {
+        const scrollView = res[0]
+        const wraper = res[1]
+        const target = res.slice(2) || []
+        if (isDef(wraper) && isDef(scrollView)) {
+          const index = target.findIndex((item) => {
+            return item.bottom! > scrollView.top! && item.top! < scrollView.bottom!
+          })
+          if (index < 0) {
+            scrollTop.value = -1
+            nextTick(() => {
+              scrollTop.value = Math.max(0, target[0].top! - wraper.top! - scrollView.height! / 2)
+            })
           }
-        })
-      })
+        }
+      }
     })
   }
 }
diff --git a/src/uni_modules/wot-design-uni/components/wd-sticky/wd-sticky.vue b/src/uni_modules/wot-design-uni/components/wd-sticky/wd-sticky.vue
index 738370ff9..5eb49a8df 100644
--- a/src/uni_modules/wot-design-uni/components/wd-sticky/wd-sticky.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-sticky/wd-sticky.vue
@@ -24,7 +24,7 @@ export default {
 <script lang="ts" setup>
 import wdResize from '../wd-resize/wd-resize.vue'
 import { computed, getCurrentInstance, reactive, ref, type CSSProperties } from 'vue'
-import { addUnit, getRect, objToStyle, requestAnimationFrame, uuid } from '../common/util'
+import { addUnit, getRect, objToStyle, pause, uuid } from '../common/util'
 import { stickyProps } from './types'
 import { useParent } from '../composables/useParent'
 import { STICKY_BOX_KEY } from '../wd-sticky-box/types'
@@ -108,14 +108,13 @@ function createObserver() {
 /**
  *  当前内容高度发生变化时重置监听
  */
-function handleResize(detail: any) {
+async function handleResize(detail: any) {
   stickyState.width = detail.width
   stickyState.height = detail.height
-  requestAnimationFrame(() => {
-    observerContentScroll()
-    if (!stickyBox || !stickyBox.observerForChild) return
-    stickyBox.observerForChild(proxy)
-  })
+  await pause()
+  observerContentScroll()
+  if (!stickyBox || !stickyBox.observerForChild) return
+  stickyBox.observerForChild(proxy)
 }
 /**
  *  监听吸顶元素滚动事件
diff --git a/src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue b/src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue
index a29409563..8318e955d 100644
--- a/src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue
@@ -74,7 +74,7 @@ export default {
 <script lang="ts" setup>
 import wdIcon from '../wd-icon/wd-icon.vue'
 import { computed, onBeforeMount, ref, watch } from 'vue'
-import { objToStyle, requestAnimationFrame, isDef, pause } from '../common/util'
+import { objToStyle, isDef, pause } from '../common/util'
 import { useCell } from '../composables/useCell'
 import { FORM_KEY, type FormItemRule } from '../wd-form/types'
 import { useParent } from '../composables/useParent'
@@ -221,24 +221,23 @@ function formatValue(value: string | number) {
   return `${value}`
 }
 
-function handleClear() {
+async function handleClear() {
   clearing.value = true
   focusing.value = false
   inputValue.value = ''
   if (props.focusWhenClear) {
     focused.value = false
   }
-  requestAnimationFrame(() => {
-    if (props.focusWhenClear) {
-      focused.value = true
-      focusing.value = true
-    }
-    emit('change', {
-      value: ''
-    })
-    emit('update:modelValue', inputValue.value)
-    emit('clear')
+  await pause()
+  if (props.focusWhenClear) {
+    focused.value = true
+    focusing.value = true
+  }
+  emit('change', {
+    value: ''
   })
+  emit('update:modelValue', inputValue.value)
+  emit('clear')
 }
 async function handleBlur({ detail }: any) {
   // 等待150毫秒，clear执行完毕
diff --git a/src/uni_modules/wot-design-uni/components/wd-transition/wd-transition.vue b/src/uni_modules/wot-design-uni/components/wd-transition/wd-transition.vue
index ea6572a38..f0e3cf0a7 100644
--- a/src/uni_modules/wot-design-uni/components/wd-transition/wd-transition.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-transition/wd-transition.vue
@@ -17,7 +17,7 @@ export default {
 
 <script lang="ts" setup>
 import { computed, onBeforeMount, ref, watch } from 'vue'
-import { isObj, isPromise, requestAnimationFrame } from '../common/util'
+import { isObj, isPromise, pause } from '../common/util'
 import { transitionProps, type TransitionName } from './types'
 import { AbortablePromise } from '../common/AbortablePromise'
 
@@ -127,16 +127,16 @@ function enter() {
       const duration = isObj(props.duration) ? (props.duration as any).enter : props.duration
       status.value = 'enter'
       emit('before-enter')
-      enterLifeCyclePromises.value = requestAnimationFrame()
+      enterLifeCyclePromises.value = pause()
       await enterLifeCyclePromises.value
       emit('enter')
       classes.value = classNames.enter
       currentDuration.value = duration
-      enterLifeCyclePromises.value = requestAnimationFrame()
+      enterLifeCyclePromises.value = pause()
       await enterLifeCyclePromises.value
       inited.value = true
       display.value = true
-      enterLifeCyclePromises.value = requestAnimationFrame()
+      enterLifeCyclePromises.value = pause()
       await enterLifeCyclePromises.value
       enterLifeCyclePromises.value = null
       transitionEnded.value = false
@@ -162,11 +162,11 @@ async function leave() {
     status.value = 'leave'
     emit('before-leave')
     currentDuration.value = duration
-    leaveLifeCyclePromises.value = requestAnimationFrame()
+    leaveLifeCyclePromises.value = pause()
     await leaveLifeCyclePromises.value
     emit('leave')
     classes.value = classNames.leave
-    leaveLifeCyclePromises.value = requestAnimationFrame()
+    leaveLifeCyclePromises.value = pause()
     await leaveLifeCyclePromises.value
     transitionEnded.value = false
     classes.value = classNames['leave-to']