小程序延迟执行wx.nextTick

wx.nextTick(function callback)

基础库 2.2.3 开始支持,低版本需做兼容处理。
小程序插件:支持,需要小程序基础库版本不低于 2.7.1
微信 Windows 版:支持
微信 Mac 版:支持

延迟一部分操作到下一个时间片再执行。(类似于 setTimeout)

参数

function callback

说明

因为自定义组件中的 setData 和 triggerEvent 等接口本身是同步的操作,当这几个接口被连续调用时,都是在一个同步流程中执行完的,因此若逻辑不当可能会导致出错。

一个极端的案例:当父组件的 setData 引发了子组件的 triggerEvent,进而使得父组件又进行了一次 setData,期间有通过 wx:if 语句对子组件进行卸载,就有可能引发奇怪的错误,所以对于不需要在一个同步流程内完成的逻辑,可以使用此接口延迟到下一个时间片再执行。

示例代码

Component({
  doSth() {
    this.setData({ number: 1 }) // 直接在当前同步流程中执行

    wx.nextTick(() => {
      this.setData({ number: 3 }) // 在当前同步流程结束后,下一个时间片执行
    })

    this.setData({ number: 2 }) // 直接在当前同步流程中执行
  }
})

分类小程序界面UI相关推荐:

小程序显示消息提示框wx.showToast 小程序显示模态对话框 小程序显示 loading 提示框wx.showLoading 小程序底部弹窗wx.showActionSheet 小程序隐藏消息提示框wx.hideToast 小程序隐藏 loading 提示框wx.hideLoading 小程序返回对话框wx.enableAlertBeforeUnload 关闭小程序页面返回询问对话框wx.disableAlertBeforeUnload 小程序显示导航条加载动画wx.showNavigationBarLoading 小程序动态设置当前页面的标题wx.setNavigationBarTitle 小程序设置页面导航条颜色wx.setNavigationBarColor 小程序隐藏导航条加载动画wx.hideNavigationBarLoading 小程序隐藏返回首页按钮wx.hideHomeButton 小程序动态设置下拉背景字体、loading 图的样式wx.setBackgroundTextStyle 小程序动态设置窗口的背景色wx.setBackgroundColor 小程序tabBar右上角显示红点wx.showTabBarRedDot 小程序显示 tabBar wx.showTabBar 小程序动态设置 tabBar 的整体样式wx.setTabBarStyle 小程序动态设置 tabBar 某一项的内容wx.setTabBarItem 小程序tabBar右上角添加文本wx.setTabBarBadge 小程序移除 tabBar右上角的文本wx.removeTabBarBadge 小程序隐藏 tabBar的右上角的红点wx.hideTabBarRedDot 小程序隐藏 tabBar wx.hideTabBar 小程序动态加载网络字体 小程序停止当前页面下拉刷新wx.stopPullDownRefresh 小程序开始下拉刷新 小程序将页面滚动到目标位置wx.pageScrollTo 小程序增强 ScrollView 实例ScrollViewContext 小程序动态设置置顶栏文字内容wx.setTopBarText 小程序延迟执行wx.nextTick 小程序获取菜单按钮的布局位置wx.getMenuButtonBoundingClientRect 小程序设置窗口大小wx.setWindowSize 小程序监听窗口尺寸变化事件wx.onWindowResize 小程序取消监听窗口尺寸变化事件wx.offWindowResize