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

    xiaoxiao2022-07-06  193

    做一个小的需求,要求某个数组里面元素一个一个的展示。想到第一个方案是设置事件间隔, 具体就是循环+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编程。

    最新回复(0)