微信小程序：不支持sleep的思考以及循环时间间隔设置

向右看齐 2022-01-28 00:27 2038阅读 0赞

做一个小的需求，要求某个数组里面元素一个一个的展示。想到第一个方案是设置事件间隔， 具体就是循环+sleep函数，突然发现微信小程序不支持sleep函数，而且微信关于定时器这东西都是异步的（异步这个东西对于客户来说真的不错，有个名词“不延迟满足”，但有的时候对于编程新手来说，可能就很烦不能一跟线式编程。）

于是自己写一个sleep函数，其实这个sleep很简单实现，就是利用时间，不到你指定的时间就不return。

例子

function sleep(numberMillis) {
      var now = new Date();
      var exitTime = now.getTime() + numberMillis;
      while (true) {
        now = new Date();
        if (now.getTime() > exitTime)
          return;
      }
    }

但是你会发现，这种sleep不符合微信小程序以及现在很多人都在提倡的异步编程。首先看上面这段代码，其实很长一段时间内，CPU不停地做运算，然而这些计算却没有什么卵用。而且还可能导致你设置的太多导致CPU过热，或者占用珍贵的可用资源。

那应该怎么用优雅且异步的方式来完成这样的事呢？

有的，就是setTimeOut + 递归思想 + 标记向量

比如我想让一个数组，隔一段时间，循环将每个元素单独标记出来，方面前端识别进行对应的特殊展示

思路：  
（1）设一个标记量flag，设为0

（2）写一个函数 function，setTimeOut里面设置一个for循环，匹配到了，就单独将这个元素标记一个特殊的属性，然后标记量flag偏移一位（+1），然后再调用这个function形成循环

代码

标记量

currentScanIndex:0

递归循环

setTimeoutScanImg:function(){
        var _this = this;
        var _list = _this.data.netImgs;
    
        var currentScanIndex = _this.data.currentScanIndex;
        if (currentScanIndex > 3){
          return;
        }
        setTimeout(function () {
          for (var i = 0; i < _list.length; i++) {
            if (i === currentScanIndex) {
              _list[i].scan = 1;
            } else {
              _list[i].scan = 0;
            }
          }
          _this.setData({
            netImgs: _list
          })
          _this.data.currentScanIndex = _this.data.currentScanIndex + 1;
          _this.setTimeoutScanImg();
        }, 2000);
      },

这就不需要sleep这种傻傻的方法，白白的浪费CPU资源。觉得别人这个套路很优雅，解决问题又不是那种浪费资源的那种傻傻的一根线得1编程。