swan.nextTick

基础库 3.15.104 开始支持，低版本需做兼容处理。

解释：延迟一部分操作到下一个时间片再执行。（类似于 setTimeout）

方法参数

Function callback

callback参数说明

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

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

示例

扫码体验

自定义组件 swan.nextTick - 图1请使用百度APP扫码

图片示例

自定义组件 swan.nextTick - 图2

自定义组件 swan.nextTick - 图3

自定义组件 swan.nextTick - 图4

代码示例1

在开发者工具中预览效果

  1. // 自定义组件逻辑 (custom.js)
  2. Component({
  3.     properties: {
  4.         name: {
  5.             type: String,
  6.             value: 'swan'
  7.         }
  8.     },
  9.     data: {
  10.         age: 1,
  11.         number: ''
  12.     },
  13.     methods: {
  14.         nextTick() {
  15.             swan.showToast({
  16.                 title: '在控制台或者sConsole中查看执行顺序',
  17.                 icon: 'none'
  18.             });
  19.             this.setData({number: 1}) // 直接在当前同步流程中执行
  20.             console.log(this.data.number);
  21.             swan.nextTick(() => {
  22.                 this.setData({number: 3}) // 在当前同步流程结束后，下一个时间片执行         
  23.                 console.log(this.data.number);
  24.             })
  25.             this.setData({number: 2}) // 直接在当前同步流程中执行
  26.             console.log(this.data.number);
  27.         }
  28.     }
  29. });

代码示例2 - 常用用法

在开发者工具中预览效果

  1. <view>
  2.     <view>{{name}}</view>
  3.     <button bindtap="getStorage">点击赋值</button>
  4. </view>
  1. // 在当前同步流程结束后，下一个时间片执行
  2. Page({
  3.     data: {
  4.         name: 'swan',
  5.         renderEnd: true
  6.     },
  7.     getStorage(){
  8.         this.setData({
  9.             name: 'smartApp'
  10.         }, () => {
  11.             swan.nextTick(() => {
  12.                 this.data.renderEnd = false; // 在当前同步流程结束后，下一个时间片执行
  13.                 console.log(this.data.renderEnd)
  14.             });
  15.         });
  16.     }
  17. });