前言：在设计小程序的时候，难免有需要登录啊，访问数据库，交互等访问后台的数据，这时候，时间，往往不能控制，有时候网络并不稳定，这时候，我们做页面的设计的时候就必须考虑给出等待通知，定时，时间间隔的方法：

1 给用户等待通知延迟

1.1 通过显示Toast给用户等待通知

【中级】【后台】微信小程序 - 腾讯云 - wafer2 - PHP - DEMO - 003 - 源码分析 - 03 - 腾讯后台初始化和 CodeIgniter

微信Demo封装了消息通知Toast给用户，在demo中定义在，util.js里面：

// 显示繁忙提示
var showBusy = text => wx.showToast({
    title: text,
    icon: 'loading',
    duration: 10000
})

// 显示成功提示
var showSuccess = text => wx.showToast({
    title: text,
    icon: 'success'
})

// 一般错误提示
var showErr = text => wx.showToast({
    title: text,
    showCancel: false
})


// 显示失败提示
var showModel = (title, content) => {
    wx.hideToast();

    wx.showModal({
        title,
        content: JSON.stringify(content),
        showCancel: false
    })
}

module.exports = { formatTime, showBusy, showSuccess, showErr,showModel }

在js文件开始中，用require命令，加入上面的接口

var util = require('../../utils/util.js')

使用的时候，直接调用就好了，在一开始请求的时候，就把等待提示打印出来，在从服务器返回成功后，把等待通知换成成功的勾就好了。

效果如下：

1.2 一些组件也有给出客户等待通知的属性：

例如button 的loading

Boolean

false

名称前是否带 loading 图标

wxml里面的loading

<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
		disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>

js下数据里面，

var pageObject = {
  data: {
    defaultSize: 'default',
    primarySize: 'default',
    warnSize: 'default',
    disabled: false,
    plain: false,
    loading: false
  },

1.3 loading 标签的使用：

前言：loading和wx.showToast的区别：

wx.showToast加载的时间长度是需要手动设置的，默认1500ms，而loading标签则可以配合数据加载进行隐藏。

核心就是在数据量较大或者网络情况较差，请使用loading，其他情况使用wx.showToast。

WXML：

JS：

初始化显示loading标签，等到数据从后台获取完毕，再进行隐藏即可。

效果：

2 实践等待，和定时：

上面给出的办法，只是，给出了需要等待的通知给用户，然后，实际上，我们必须实现一个真的等待函数，来等待来着服务器或者访问数据，信号不好的延迟。

2.1 settimeout和setinterval

在一个项目中用wx.request 去拿服务器上的数据userchk，拿完数据后，要根据服务器的返回值，来决定页面的跳转，

最开始的想法，是想在页面上，通过tag navigator来页面路由，但是，发现无论如何调试，button，

可是，按键button，bindtap的事件执行后，服务器的数据还没有回来，这时候，决定跳转必须等待服务器的数据处理完成，然后根据数据的值来跳转页面。

后来，决定改用js里面的控制语句进行页面跳转的办法，利用settimeout来在跳转前，先等待服务器返回的数据更新后，在跳转，这样就可以跳转到正确页面了：

      // Page navigate
      setTimeout(function () {
        if (userchk == 'true') {
          util.showSuccess('请求成功完成');
          wx.switchTab({
            url: '../../../pages/notes2/pagenotes2'
          })
        } else {
          util.showErr('找不到此会员');
        } }, 200);
    },

参考：

1 微信小程序中如何使用loading组件显示载入动画

https://segmentfault.com/a/1190000008709046

2 微信小程序弹出loading层的两种方法

http://www.51xuediannao.com/xiaochengxu/111311I2016.html

3 【微信小程序】loading标签使用，可自定义时长

https://www.cnblogs.com/xuzhengzong/p/8035991.html

4 settimeout和setinterval

https://blog.csdn.net/xuexixuexien/article/details/79146659

5 微信小程序带参传递的界面跳转的两种方式

https://blog.csdn.net/bright789/article/details/54729151