小程序坑 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

时间: 2024-10-16 20:35:30

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

百度小程序坑坑坑

吐槽:被小程序坑死啊 问题:在循环中,根据条件加载不同的template模板出现问题. <block s-for="news, index in item.news_data"> <!--begin template is 中第一次比较,满足就会出现问题 --> <block s-if="item.type==1"> <template is="newsText" data="{{{...ite

小程序坑两三

以下总结随时有可能根据小程序版本更新出现变化 在获取小程序二维码时, 返回的是"乱码", 其实是==二维码==的二进制文件流, 需要后端对其进行处理, 存为图片后, 将路径返回给前端即可 在==启用新接口==的时候, 需要将域名添加到 [微信公众平台]--[设置]--[开发设置]--[服务器配置], 才可正常访问服务器 小程序中request方法当请求方式为GET时, 将==参数==写入data中即可实现url的==自动拼接==, 无须手动进行url拼接 在小程序中不可引用任何涉及到=

微信小程序 坑

lodash 会报错, 得改成下面的形式 var root = freeGlobal || freeSelf || Function('return this')(); 改成 /* freeGlobal 和 freeSelf 都为 false, 因为微信直接注入了 window 和 self, 最终 Array = (Function('return this')()).Array 为 undefined, 只需要替换 root 的值即可*/var root = { Array: Array,

小程序坑集

1. wx.request 响应的数据res.data是字符串 问题:响应数据多了四个小点 解决方法:剔除四个小点,再用JSON.parse序列化json var obj = JSON.parse(res.data.replace(/^.*?([\[{])/, "$1"));

微信小程序 wx.redirectTo返回按钮处理

描述:有三个页面,第一个页面wx.navigateTo到第二个页面,第二个页面跳转到第三个页面,第三个页面不能有返回键,第三个页面提交返回第二个页面,第二个页面可以按返回键返回第一个页面 问题:使用了wx.redirectTo,但发现第三个页面的返回按钮存在,经过查阅发现是因为上一个页面是 使用wx.navigateTo从第一个页面跳转而来,所以使用wx.redirectTo从第二个页面跳转到第三个页面以后第三个页面有返回按钮. 解决办法:使用第二个页面到第三个页面的跳转使用wx.reLaunc

小程序坑之 swiper组件

表现:swiper 内容 空白 原因:swiper组件的current值为n时,重新刷新页面,current值不变,当刷新后的swiper item的数量少于 n 时,swpier找不到对应的item,故会出现空白的情况. 解决方法: 1.每次刷新的时候,将current置为0. 2.或者 通过swiper的滑动事件记录当前的current值,刷新之后将两个值进行对比,再根据业务需求,设置当前的current值. 原文地址:https://www.cnblogs.com/Odelia/p/100

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

VM45:1 thirdScriptError sdk uncaught third Error regeneratorRuntime is not defined ReferenceError: regeneratorRuntime is not defined 导入runtime 链接https://github.com/xubaifuCode/regeneratorRuntime/tree/master hostGoodsList is not defined ReferenceError

微信小程序坑==》ios时间转换问题

问题:ios无法将带 ‘-’的时间转为时间戳.如:1. time=“2020-04-10T13:12:45.000+0000” 必须让后台返回成时间戳形式,不然无法转化.2. time="2020-04-10 01:01:01"; time2=time.replace(/-/g, '/'); new Date(time2).getTime() 可将‘-’转为‘/’再计算时间戳 不然ios会报错:转化的时间搓为null,然后用null转话的时间格式就是一堆NaN 原文地址:https:/

一名Android开发者的微信小程序填坑之路(1)

前言 首先要声明的是,我是一名 Android 开发者,之前基本没有前端开发经验,甚至连 JS ,HTML 都是为了开发小程序现学的一些皮毛--所以文章中所提到的一些点也许在资深前端开发者看来只是小case,但是站在一个 Android 开发者的角度来看确实是大坑. 前面就不说太多东西了,文章的末尾再谈谈我对小程序的一些看法--这篇文章主要是谈谈在开发小程序的过程中遇到的一些坑. PS:推荐一下我写的一个微信小程序版的Gank客户端:wechat-weapp-gank 正文 1,获取小程序开发工