js销毁new obj对象另类解决

JavaScript023

js销毁new obj对象另类解决,第1张

一般删除某个obj的属性话,那么可以通过delete删除obj.xx,但是无法删除原型链prototype上的属性和方法,当然var的也无法删除。

现在有某个时间插件,需要点击切换类型,由于是new obj生成的开始和结束时间组件,切换会导致选择具体时间时重复弹出,算是一个不具有代表性的问题解决。

基本实现的流程是,点击时间类型,独立初始化2个new obj时间组件。但由于需要额外切换时间类型,页面的时间组件需要重新实例化,这就产生了点击n次弹出n次的情况。

由于是内存中生成的new实例没有及时回收销毁,后面生成的重复叠加。思考下次点击的时候能否提前取消掉前次生成的new obj?

1.常规的null,delete都不适用当前情况,而js是运行在内存当中,只有刷新的时候才会丢失,变相能解决问题。判断xx=new obj,xx不为undefined的时候window.location.reload()刷新页面。测试。测试虽然的确可以解决问题,但是体验不会很好。尽管在点击时间类型前刷新页面,也符合清空重置的目标,但是体验不良好,暂作为下策。

2.既然刷新的本质是dom元素的重新渲染,那么通过局部的dom元素更新能否解决问题呢?

通过先移除元素再添加渲染到页面去。通过$('xx').html($("demo").prop("outerHTML"))把demo元素重新渲染一遍。发现的确可以解决当前少见的重复渲染问题。当前的问题是由于插件某方面的引起问题,基本的价值在于了解页面dom页面的渲染和js运行的基本流程,仅供熟悉参考。

内存无法回收,造成内存泄露。js定时器不会被自动销毁,即它所占内存无法被自动回收,如果不回收清除定时器,它会一直占用内存资源,造成内存泄漏。定时器是一个应用十分广泛的线程工具,可用于调度多个定时任务通过后台线程的方式执行。

最近在使用Vue+Element开发一个后台管理系统,想找一个好看点的素材当背景,突然找到 particles.js (传送门: https://github.com/VincentGarreau/particles.js/ ),也就是传说的粒子效果。于是想使用它当作登陆背景。

先上效果图如下

如图可以看得到粒子效果在上面,而登录框则被挤到下面,因此需要通过css定位来调整位置,使其达到想要的效果。

粒子效果在登陆后默认会继续运行,会导致浏览器占用资源过高,查看其源码后发现作者为其写了一个销毁粒子函数,因此可以在登陆后经行手动销毁粒子效果,释放资源。

后记:粒子销毁后如果用户退出登陆返回到登陆页面,粒子效果将不再渲染,这个问题目前还没有解决,到时候要是解决了再来补充吧。