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);*/

  }

小程序坑 redirectTo 计时器 setInterval clearInterval的更多相关文章

  1. 详解封装微信小程序组件及小程序坑(附带解决方案)

    一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模 ...

  2. 微信小程序navigateTo /redirectTo/navigateBack 三者区别

    navigateTo 不会将旧页面出栈: redirectTo 会将旧页面出栈,再将需要跳转到的页面入栈: navigateBack 则是将页面栈最后一个元素出栈,因此倒数第二个元素会成为最后一个元素 ...

  3. 微信小程序 功能函数 计时器

    let lovetime = setInterval(function () { let str = '(' + n + ')' + '重新获取' that.setData({ getText2: s ...

  4. 小程序坑之 swiper组件

    表现:swiper 内容 空白 原因:swiper组件的current值为n时,重新刷新页面,current值不变,当刷新后的swiper item的数量少于 n 时,swpier找不到对应的item ...

  5. 微信小程序-坑1-await-async

    VM45:1 thirdScriptError sdk uncaught third Error regeneratorRuntime is not defined ReferenceError: r ...

  6. 微信小程序-坑,wxml里wx:if 判断 数字 是否在一个数组中。

    <view wx:if="{{item.index}} in {{vote_list}}"> 已赞 <image src="/static/zan_y. ...

  7. 微信小程序开发 (资料汇总,谁还没被坑过?希望助你绕过一些坑)

    最近帮人家做一个微信小程序,刚好想熟悉一下.由于牵扯到多用户使用系统,以及数据共享,所以自然架构选择了,客户端和服务器的方式. 后台服务器是windows server,后台程序是.Net  WebA ...

  8. 原创+转发:微信小程序navigator、redirectTo、switchTab几种页面跳转方式

    什么是事件? 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 详解(以常见的tap点击事情为例) 模板.wxml代码: <view id="tapTest ...

  9. 微信小程序开发踩坑记

    前言 微信小程序自去年公测以来,我司也申请了一个帐号开发,春节前后开始开发,现在终于告一个段落了.谨以此文记录下踩过的坑. 坑1:scroll-view与onPullDownRefresh冲突 由于有 ...

随机推荐

  1. search-a-2d-matrix——二维矩阵找数

    题目描述 Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the ...

  2. windows快捷启动命令

    gpedit.msc-----组策略 sndrec32-----录音机 nslookup----- ip地址侦测器 explorer------ 打开资源管理器 logoff-------注销命令 t ...

  3. 自动清理DataGuard备机日志

    >> from zhuhaiqing.info #!/usr/bin/bash #删除DataGuard备机归档日志备份 export ORACLE_HOME=/opt/oracle/pr ...

  4. Spark高速上手之交互式分析

    1.1  Spark交互式分析 执行Spark脚本前,启动Hadoop的HDFS和YARN.Spark的shell提供 了简单方式去识别API.相同也有一个强大的工具去交互式地分析数据. 两种语言有这 ...

  5. 求重集的r-组合

    具体的就不在这里说了,如果有兴趣的可以把我的工程包下载下来看,留个URL http://pan.baidu.com/s/1bnes1HX

  6. codeforces #364d As Fast As Possible

    题意:一群学生,要到离这里为l的地方去.有一辆车,车只有k个座位.人和车的速度分别v1,v2,问你所有人到达的最小时间. 思路:数学题.最小时间就是要求所有同学同时到达.每个同学最多上一次车.那么显然 ...

  7. 查看Android源码和源码布局

    一.查看源码 1.https://github.com/android 2.http://grepcode.com/project/repository.grepcode.com/java/ext/c ...

  8. Auto Layout之创建布局约束

    上篇文章给大家介绍了AutoLayout 的由来及OC中关于AutoLayout 的类.这篇文章将向大家介绍,在iOS 编程中怎样使用Auto Layout 构建布局约束. 创建布局约束 创建布局约束 ...

  9. ipmi 最新和MegaCli 监控磁盘和raid信息

    集群监控之 —— ipmi操作指南 原创 2010年03月23日 16:45:00 标签: 集群 / 服务器 / command / callback / user / interface 12224 ...

  10. 【Axure插件】之浏览器打开失败

    下载地址:https://files.cnblogs.com/files/Owen-ET/AxureRP_for_chorme_0_6_2.xml 下载后的文件后缀修改为:AxureRP_for_ch ...