1. 功能描述：

程序处理时间比较久时，比如需要500毫秒以上，就需要Loading提示；如果处理很快，比如500毫秒以内，就不要出现Loading。这样的好处就不会到处打开就展示Loading，但又不会让用户觉得程序卡死出bug。

2. 场景举例：

请求接口数据时，如果小于500ms就直接显示了，不要Loading；但是超过500ms就出现Loading，并且Loading出现至少350ms，因为假如需要550ms的话，就会出现Loading后，50ms后又关闭了，给人感觉闪了一下，让人困惑发生什么事。

3. 效果演示：

4. 源代码：

帮小忙工具箱里很多地方都使用这样的loading，实现核心就是利用Promise.race；Promise.all两个函数。

/**
 * 用于promise执行时间过长时，自动显示loading
 */
export async function autoLoad(promise, delay = 500, duration = 350) {
  let res = await Promise.race([promise, sleep(delay)]);
  if (!res?.includes?.("sleep")) {
    return res;
  }
  wx.showLoading({ title: "加载中" });
  let [result] = await Promise.all([promise, sleep(duration)]);
  wx.hideLoading();
  return result;
}

/**
 * sleep函数
 */
export function sleep(time) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("sleep" + time);
    }, time);
  });
}

// 使用
let res = getList() // 得到promise
autoLoad(res).then((res)=>{console.log(res)})

function getList(){
// 获取数据的接口
}

4. 推荐阅读

因为腾讯帮小忙没有小程序版，我一个人业余时间开启了帮小忙小程序开发之旅，目前已上线80个工具。