快捷搜索: 王者荣耀 脱发

小程序中setInterval定时器无限轮询问题

日常开发中可能会遇到每过2秒请求接口的问题,查询某种状态的问题,通常应用于支付的场景,

最近项目开发中遇到这种需求,页面二维码每过2秒请求支付状态,如果接口返回支付状态显示成功,则跳转到【评价】页面,然后执行后续的操作,如果支付状态一直是“未支付”,则还是停留在当前页面。

下面是项目需求

需求: 每间隔2秒请求支付接口查看是否完成支付, 完成支付—> 跳转到 评价页 未完成支付 —> 继续停留在当前二维码页面

第一感觉大家都会想到使用setInterval 无限定时器解决就好了,但是这里面会遇到一个坑,就是定时器清除的问题,因为小程序中定时器的机制是,单个页面中使用setInterval定时器, 实际上这个定时器是一个全局的定时器,项目中所有页面都会受到影响。

实现方式: 请求中,通过使用 clearInterval 清除定时器

所以会出现下面的这种问题发生: 返回其他任何一个页面,控制台都会请求这个detail详情接口, 如下图

这不是我们希望的结果。

尝试过 将 清除定时器放在 小程序 onUnmounted 生命周期中,或者 是 onHide 生命周期中,均没有效果,别人的博客里写的都是放在这两个生命周期中,实际上根本就无法清除定时器。

最后的解决方案是: 讲定时器的id 存在本地缓存中,然后点击进入下一个页面,手动将缓存的值,取名为 timer,设置为 hasCleared ,这个值起着一个标志的作用,然后在写定时器的页面,做一个判断,逻辑是这样:

从本地缓存取 timer 的值,如果不为 hasCleared 就继续发请求,反之,不发请求,这样就解决了小程序定时器无限请求的问题了

贴代码:

这是二维码定时器轮询发请求页面 这是其他页面

在其他页面中 onLoad 生命周期阶段 ,从本地缓存取值,手动设置为 hasCleared,定时器那边因为有判断逻辑,timer 值为 hasCleared 就不会发请求,

经验分享 程序员 微信小程序 职场和发展