关于Loading显示时机的经验分享
发布于 7 年前 作者 panxiulan 19343 次浏览 来自 问答

好的UI应该离不开提示信息，完善的提示信息可以让访客更清楚知道自己在做什么，其中“Loading”的使用最为频繁，常见于游戏场景的切换中，由于切换场景可能比较耗时，需要告诉用户。

但是在 App 请求接口的时候，如果每个请求前都显示 Loading 的话，就会非常频繁的看见 Loading 的身影，这也非常影响访问和访客的心情。

我的经验是，用 `setTimeout` 设置一个时间，比如 1s 后再显示，如果请求接口在 1s 内完成了，那么完全有机会在触发 `setTimeout`之前清除定时器，这样就不会显示 Loading 了。

handlePostCategoryTap: function (e) {
   let category = e.currentTarget.dataset.item;
   
   // 技巧在这里
   let showLoadingTimer = setTimeout(() => {
       wx.showLoading({
           title: '请求中',
       });
   }, 1000);
   wx.request({
       url: `https://xxx.com/api/post/${category.id}`,
       success: (res) => {
           if (200 == res.statusCode) {
               this.setData({
                   currentPostCategory: category,
                   post: res.data,
               });
               wx.setNavigationBarTitle({
                   title: `论坛 - ${category.name}`,
               });
               wx.hideLoading();
               this.mainBoxShadeTap();
           } else {
               wx.showToast({
                   title: `服务器发生错误：${res.statusCode}`,
                   icon: 'loading',
               });
           }
       },
       fail: () => {
           wx.showToast({
               title: `请求发送失败！`,
               icon: 'loading',
           });
       },
       complete: () => {
           // 如果请求在 setTimeout 前完成了，那么就不会触发Loading
           clearTimeout(showLoadingTimer);
       },
   });
},
回到顶部