首页 > 建站教程 > 前端框架 >  layAdmin页面跳转定时器不销毁正文

layAdmin页面跳转定时器不销毁

最近在用layAdmin做项目时,遇到了一个问题:layAdmin页面跳转定时器不销毁。具体看下面的代码:
layui.define(function(exports){

    // 定义了一个定时器
    let timer = setInterval(()=>{
        console.log(1)
    }, 1000)

    //对外暴露的接口
    exports('common', {});
});
然后在跳转页面后,发现这个console仍然在执行。当再次跳转回来,发现时间变快了。也就是说,这个定时器并没有随着页面的跳转,而销毁。不像vue。于是,在官网找有没有监听路由跳转、页面生命周期等的相关方法,发现一无所获。可能layuiAdmin真的没有提供此类方法(我这是layuiAdmin.pro-v1.1.0,为了兼容IE8,只能用它了,新版本不知道)。那么只能自己解决了:

方法一:因为我爱模板网用的是单页面的layuiAdmin,所以只要监听hash变化,清除定时器即可:
layui.define(function(exports){

    // hash路由改变,清除定时器,这个也可以放在公共js里面,或者放在入口js内。
    window.onhashchange = function(){
        if(window.timer || window.timer === 0){
            clearInterval(window.timer)
        }
    }

    // 定义了一个定时器
    window.timer = setInterval(()=>{
        console.log(1)
    }, 1000)

    //对外暴露的接口
    exports('common', {});
});
方法二和方法一差不多,只不过不做监听了,调用定时器之前就清楚它:
layui.define(function(exports){

    if(window.timer || window.timer === 0){
        clearInterval(window.timer)
    }

    // 定义了一个定时器
    window.timer = setInterval(()=>{
        console.log(1)
    }, 1000)

    //对外暴露的接口
    exports('common', {});
});