小程序坑 redirectTo 计时器 setInterval clearInterval

var time = 20；    var timer = setInterval(function () {time = time - 1;that.setData({CountDown: time});console.log(time);if (time == 10) {clearInterval(timer );wx.redirectTo({url: './game',});}}, 1000);

正常情况下页面刷新之后正在执行的计时器会被清除，可是在小程序当中并不是这样，即使执行了redirectTo关闭了当前页面到一个新页面，直到达到清除的条件之前（此例是time == 10）,老页面的计时器仍旧不会被清除，仍旧继续执行。

网友通过将timer添加到data中，通过以下方法获得setInterval返回值，并在onload的时候清楚上一个页面的计时器，这种做法是错误的，因为此时的this已是一个新的页面，再通过this.data.timer的方法是获取不到上一个页面的计时器id的。每次开始打印的都是

start:10000是达不到启动页面就能清除上一个页面的计时器的效果的。

  data: {timer: 10000}， onLoad: function(options) {var that = this;clearInterval(that.data.timer);console.log("start:" + that.data.timer );var time = 20;that.data.timer = setInterval(function () {time = time - 1;that.setData({CountDown: time});console.log(time);if (time == 10) {clearInterval(that.data.timer );wx.redirectTo({url: './game',});}}, 1000);console.log("end:" + that.data.timer);*/}

解决方法：redirectTo提供了接口调用成功或完成之后的success、complete的回调方法，只要在这里写clearInterval就能在跳转之前清除设置的interval了，在这里为便于其他的函数也能获取到当前页面的计时器进行清除，我们仍旧将timer设置到data中

  data: {timer: 10000}， onLoad: function(options) {var that = this;clearInterval(that.data.timer);console.log("start:" + that.data.timer );var time = 20;that.data.timer = setInterval(function () {time = time - 1;that.setData({CountDown: time});console.log(time);if (time == 10) {clearInterval(that.data.timer );wx.redirectTo({url: './game',

　　　　　　　success: function() {

　　　　　　　　clearInterval(that.data.timer);

　　　　　　 }

        });}}, 1000);console.log("end:" + that.data.timer);*/}

转载于:https://www.cnblogs.com/znsongshu/p/9420151.html

小程序坑 redirectTo 计时器 setInterval clearInterval相关推荐

小程序坑集【日常总结，持续更新(11.08更新)】
大家好,上班的日子总是过的那么快,夹杂着一个多请了四天假的国庆节,转眼距离上篇博文又过去一个多月了,惭愧啊.之前萍子写过一篇[小程序跳H5页面]的博文,说来也是无心在结尾的时候,回想那些被小程序折磨的 ...
微信小程序坑点杂谈（五）1000比200小？光速解决小程序数值大小判断错误的问题
微信小程序坑点杂谈(五)光速解决小程序数值大小判断错误的问题一.写在开头本人只是一枚小小的新手开发者,所提的问题和解答很难超过个人水平,如果对你有帮助,那就太好了! 二.发现问题我个人前些天写一 ...
微信小程序坑点杂谈（二）“{}”是什么？对象字符串怎么转换？
微信小程序坑点杂谈(二)"{}"是什么?对象字符串怎么转换? 一.写在开头本人只是一枚小小的新手开发者,所提的问题和解答很难超过个人水平,如果对你有帮助,那就太好了! 二.发现问 ...
微信小程序navigateTo /redirectTo/navigateBack 三者区别
navigateTo 不会将旧页面出栈: redirectTo 会将旧页面出栈,再将需要跳转到的页面入栈: navigateBack 则是将页面栈最后一个元素出栈,因此倒数第二个元素会成为最后一个元素 ...
uni app 调用网络打印机_前端工程师 | 原生小程序坑点：uni-app到底好用在哪里？...
要想知道uni-app开发好用在哪里,我们先看看uni-app的官网,下图系统的介绍.框架.组件.api的使用都非常的详细,感兴趣的朋友可以去尝试尝试. 我们进图正题,首先和原生小程序来比较,其次和 ...
小程序坑录-wx.getLocation接口申请
最近在用uni-app通用框架做h5和小程序,结果在小程序审核的时候,又遇到了很多天坑,故记录之. 从2022 年 7 月 14 日开始,使用位置接口,就必须在app.json中进行声明了,除此之外, ...
小程序坑-canvas
canvas中单位问题在canvas中绘制的单位都是px,但由于不同屏幕的像素比不同,在小程序中样式我们使用的单位是rpx,所以在canvas中就需要把rpx换成对应的px:由于rpx可以根据屏幕宽 ...
微信小程序之redirectTo、switchTab和navigateTo
转自:https://blog.csdn.net/qq_37818728/article/details/86482453 官方的开发者文档中对于两者的比较仅仅为是否和tabBar相互连接,简单的来讲 ...
番茄工作法，定时提醒小程序，番茄计时器
番茄工作法是一个简单易行的时间管理方法简单来说,就是把工作时间划分为多个时间段.一个番茄时间包含两个部分:25分钟的工作学习和5分钟的休息. 一.番茄工作法所需要的工具 ·一个番茄计时器(网上有很多 ...
微信小程序倒计时，计时器隐藏与显示
setTimeout(function ,time)每间隔time秒,执行一次function函数,单位是ms. js代码 Page({ data: { hidden: true, //隐藏显示器 } ...

小程序坑 redirectTo 计时器 setInterval clearInterval

小程序坑 redirectTo 计时器 setInterval clearInterval相关推荐

最新文章

热门文章