当前位置：首页 > uni-app

uniapp定时

2026-03-26 16:27:28uni-app

uniapp定时功能实现方法

使用setTimeout实现单次定时

在uniapp中可以使用JavaScript原生的setTimeout方法实现单次定时功能。该方法在指定时间后执行一次回调函数。

// 设置3秒后执行的定时器
let timer = setTimeout(() => {
    console.log('定时任务执行');
    // 执行需要的操作
}, 3000);

// 清除定时器
clearTimeout(timer);

使用setInterval实现循环定时

对于需要重复执行的定时任务，可以使用setInterval方法。该方法会按照指定的时间间隔循环执行。

// 每2秒执行一次的定时器
let interval = setInterval(() => {
    console.log('循环定时任务执行');
    // 执行需要的操作
}, 2000);

// 清除定时器
clearInterval(interval);

页面生命周期中处理定时器

在uniapp页面生命周期中需要注意定时器的清理，避免内存泄漏。通常在onUnload或onHide生命周期中清除定时器。

export default {
    data() {
        return {
            timer: null
        }
    },
    onLoad() {
        this.timer = setInterval(() => {
            console.log('页面定时任务');
        }, 1000);
    },
    onUnload() {
        // 页面卸载时清除定时器
        clearInterval(this.timer);
    }
}

使用uniapp的定时API

uniapp提供了uni.setTimeout和uni.setInterval方法，与原生方法类似但做了平台兼容处理。

// uniapp的setTimeout
uni.setTimeout(() => {
    console.log('uniapp定时任务');
}, 5000);

// uniapp的setInterval
let timer = uni.setInterval(() => {
    console.log('uniapp循环定时');
}, 3000);

// 清除uniapp定时器
uni.clearTimeout(timer);
uni.clearInterval(timer);

定时器与页面交互

定时器常用于更新页面数据，需要注意在Vue中正确更新数据以触发视图刷新。

uniapp定时

export default {
    data() {
        return {
            count: 0
        }
    },
    onLoad() {
        setInterval(() => {
            this.count++;  // 自动触发视图更新
        }, 1000);
    }
}