Javascript setInterval 导致页面内存急剧增长

刘越 发布于 2015/07/05 14:41
阅读 2K+
收藏 1

    作为一个Web前端开发小白的我,今天在写一个管理后端数据库的简单页面的时候遇到了一个棘手的问题.

我想在页面添加一个定时检查输入的指令是否有错的功能.所以在页面的body内的script内添加了这样一行代码:

setInterval(updateFormat,1000);
//其中的updateFormat是我定义在同一个script标签下的用JQuery更新一个div内的提示内容的函数
    结果我在测试页面大约2min内,我用Chrome自带的任务管理器查看时发现这个页面的"内存"那一栏已经以每秒2~3mb的速度急剧增长.

    然后,我又修改了一下代码:

setInterval("updateFormat()",1000); //其中的updateFormat是我定义在同一个script标签下的用JQuery更新一个div内的提示内容的函数
    结果还是发现页面的内存占用还是以200~300kb的速度增长.

    再贴出updateFormat中的代码缩减版给你们看看:

function updateFormat(){
    $('#check_input pre').text($('#input_content').val());
}
    所以求大神指点指点.为什么加了一个 setInterval就会使得页面内存持续上升(而且很多在线聊天的网站应该也用了 setInterval的呀,为什么它们的就不会出现这种事),谢谢!

加载中
1
jQer
jQer
function time(f, time) {
    return function walk() {
        setTimeout(function () {
            f();
            walk(); 
        }, time);
    };
}

time(updateFormat, 1000)();



0
番茄酱汁
番茄酱汁
需要删除定时器 只留下一个
番茄酱汁
番茄酱汁
@刘越 NND 都说了要清除的嘛 每次调用的时候你测试一下这个定时器返回值是多少?看看相同吗?有可能是死循环呐
刘越
刘越
什么意思,就只有一个定时器呀
0
蓝水晶飞机
蓝水晶飞机
以为别人不会一直增加setInterval定时器。
刘越
刘越
什么意思,我这儿不就只有一个定时器吗?
0
刘越
刘越

引用来自“jQer”的评论

function time(f, time) {
    return function walk() {
        setTimeout(function () {
            f();
            walk(); 
        }, time);
    };
}

time(updateFormat, 1000)();



你的意思是不是这样:

function walk(f,time){
	setTimeout(function(){f();walk();},time);
}
walk(updateFormat,1000);



这个和我那个有什么不同的地方呢?不是很明白.

你这个像是递归,我那个像是定时调用函数.

能不能在详细一点说,谢谢

jQer
jQer
回复 @刘越 : 这是个延迟递归,walk(f, time),一段时间后,内部再次调用walk(f, time)。你的代码没有对f time保存,所以每次调用walk()需要传递参数f, time。而我的则对f, time进行了保存(闭包)。
刘越
刘越
回复 @jQer : 感觉还是不太明白,为什么我原来那个代码每次都会复制一次呢?谢谢(P.s.原谅我是WEB前端的小白)
jQer
jQer
你的写错了,应该是 function walk(f,time){ setTimeout(function(){f();walk(f,time);},time); } walk(updateFormat,1000); 每次调用walk(f, time),你的都要复制一次 f 和 time,而我的则只复制一次。
0
enzozhong
enzozhong
onchange不好吗?
enzozhong
enzozhong
可以试试缓存jq对象看看
刘越
刘越
onchange只能在焦点离开输入框后才会被触发
返回顶部
顶部