uni-app 定时器会触发页面onShow方法

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app 定时器会触发页面onShow方法

开发环境 版本号 项目创建方式
Windows 22H2 HBuilderX
Android 12

操作步骤：

let timer=null
export function getLocitionPosLoop({
successGd,
successGps,
option = {}
}) {
if (timer) {
clearInterval(timer)
timer = null
}
getLocitionPos(successGd, successGd)
timer = setInterval(() => {
getLocitionPos(successGd, successGps)
}, option.intervalTime)
}


# 预期结果：

- 在主页调用定时器

# 实际结果：

- 进入其他页面，主页的定时器会一直触发当前页面的onShow

# bug描述：

- setTimeout，setInterval 定时器在主页调用，进入其他页面会导致其他页面的onShow一直触发

Harmonyos Next教程
1 回复

在uni-app中，定时器（如setInterval或setTimeout）本身并不会直接触发页面的onShow方法。onShow方法是页面生命周期的一部分，它在页面显示到屏幕上时触发，与定时器操作是独立的。然而，如果你的定时器在后台运行时页面被切换到前台，那么定时器的回调执行可能会与onShow方法的执行时间相近，但这并不意味着定时器触发了onShow。

不过，如果你的需求是在页面显示时重置或启动某个定时器，你可以在onShow方法中进行相应的定时器操作。下面是一个简单的示例，展示了如何在页面显示时启动一个定时器，并在页面隐藏时清除它。

// pages/index/index.vue
<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, uni-app!',
      intervalId: null
    };
  },
  onLoad() {
    // 页面加载时不启动定时器，避免后台运行时不必要的资源消耗
  },
  onShow() {
    // 页面显示时启动定时器
    this.startTimer();
  },
  onHide() {
    // 页面隐藏时清除定时器
    this.clearTimer();
  },
  methods: {
    startTimer() {
      if (this.intervalId !== null) {
        clearInterval(this.intervalId); // 避免重复启动定时器
      }
      this.intervalId = setInterval(() => {
        this.message = `Time updated: ${new Date().toLocaleTimeString()}`;
      }, 1000); // 每秒更新一次消息
    },
    clearTimer() {
      if (this.intervalId !== null) {
        clearInterval(this.intervalId);
        this.intervalId = null;
      }
    }
  },
  onBeforeUnload() {
    // 页面卸载前清除定时器，确保不会留下悬挂的定时任务
    this.clearTimer();
  }
};
</script>

<style>
/* 添加一些简单的样式 */
view {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
text {
  font-size: 24px;
}
</style>

在这个例子中，我们定义了一个定时器来每秒更新一次页面上的时间显示。定时器在页面显示时通过onShow方法启动，在页面隐藏时通过onHide方法清除。同时，在onBeforeUnload方法中也进行了定时器的清除，以确保在页面卸载前不会留下悬挂的定时任务。这样做可以避免因页面切换或应用退出而导致的资源泄露问题。

回到顶部