微信小程序在一个生命周期中处理其他生命周期中的函数

问题描述

问 题

我在一个页面的onReady 生命周期中循环调用了一个方法

代码如下 这个函数写在onReady生命周期里，但是当我离开这个页面时，这个函数还是在一直不停的执行。导致下一次继续进入这个页面的时候。会有多个loop函数在执行。

      function loop() {
        ctx.clearRect(0, 0, ctx.width, ctx.height);
        update();
        draw();
        console.log(122);
        let timer = setTimeout(function () {
          clearTimeout(timer);
          loop();
        }, 100);
      }
      loop();

我的想法是在onUnload生命周期里去取消这个函数的执行。
但是怎么隔着生命周期操作其他生命周期里的函数呢？

解决方案

亲，你的问题是 你把 定时器放到了包作用域中了 你应该看我在你的另外一个问题里给出的代码做法

---

UPDATE:

运行演示

给出代码

<view class="container">
  <canvas canvas-id="test" />
  <button bindtap="gotoB" style="margin-top: 20rpx">跳转到B页面</button>
</view>

const TAU = 2 * Math.PI;

function Ball(startX, startY, startVelX, startVelY) {
  this.x = startX || Math.random() * ctx.width;
  this.y = startY || Math.random() * ctx.height;
  this.vel = {
    x: startVelX || Math.random() * 2 - 1,
    y: startVelY || Math.random() * 2 - 1
  };
  this.update = function (ctx) {

    if (this.x > ctx.width + 50 || this.x < -50) {
      this.vel.x = -this.vel.x;
    }
    if (this.y > ctx.height + 50 || this.y < -50) {
      this.vel.y = -this.vel.y;
    }
    this.x += this.vel.x;
    this.y += this.vel.y;
  };
  // 画圆
  this.draw = function (ctx) {
    ctx.beginPath();
    //ctx.setGlobalAlpha(0.4);
    ctx.setFillStyle('#333333');
    ctx.arc((0.5 + this.x) | 0, (0.5 + this.y) | 0, 3, 0, TAU, false);
    ctx.fill();
  }
}

Page({
  data: {
    lock: false
  },
  ctx: null,
  times: [],
  balls: [],
  timer: null,
  lastTime: Date.now(),
  onLoad() {
    this.ctx = wx.createCanvasContext('test');
    this.ctx.width = 300;
    this.ctx.height = 150;
    for (let i = 0; i < this.ctx.width * this.ctx.height / (65 * 65); i++) {
      this.balls.push(new Ball(Math.random() * this.ctx.width, Math.random() * this.ctx.height));
    }
  },
  onShow() {
    this.loop();
  },
  onHide() {
    clearTimeout(this.timer);
  },
  gotoB() {
    wx.navigateTo({
      url: '/pages/logs/logs'
    });
  },
  loop() {
    console.log('looping');
    this.ctx.clearRect(0, 0, this.ctx.width, this.ctx.height);
    this.update();
    this.draw();
    this.timer = setTimeout(() => {
      clearTimeout(this.timer);
      this.loop();
    }, 2000);
  },
  update() {
    const diff = Date.now() - this.lastTime;

    for (let frame = 0; frame * 16.6667 < diff; frame++) {
      for (let index = 0; index < this.balls.length; index++) {
        this.balls[index].update(this.ctx);
      }
    }

    this.lastTime = Date.now();
  },

  draw() {
    this.ctx.setGlobalAlpha(1);
    this.ctx.setFillStyle('#ffffff');
    this.ctx.fillRect(0, 0, this.ctx.width, this.ctx.height);
    for (let index = 0; index < this.balls.length; index++) {
      let ball = this.balls[index];
      ball.draw(this.ctx);
      this.ctx.beginPath();
      for (let index2 = this.balls.length - 1; index2 > index; index2 += -1) {
        var ball2 = this.balls[index2];
        var dist = Math.hypot(ball.x - ball2.x, ball.y - ball2.y);
        if (dist < 100) {
          this.ctx.setStrokeStyle("#bbbbbb");
          // ctx.setGlobalAlpha(1 - (dist > 100 ? .8 : dist / 150));
          this.ctx.setGlobalAlpha(1 - dist / 150);
          this.ctx.setLineWidth(1);
          this.ctx.moveTo((0.5 + ball.x) | 0, (0.5 + ball.y) | 0);
          this.ctx.lineTo((0.5 + ball2.x) | 0, (0.5 + ball2.y) | 0);
        }
      }
      this.ctx.stroke();
    }
    this.ctx.draw();
  }
})

这篇关于微信小程序在一个生命周期中处理其他生命周期中的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！