程序员人生网站导航

避免js无限循环引起的假死或cpu100%

栏目：jscript时间：2014-04-14 00:46:46

　　本文内容很简单，只是对面试中遇到的一个记不清楚的问题的复习，鉴于是俺第一次在cnblog上发文,所以装了防护盾，请勿以任何方式扔板砖、菜刀之类物品….

　　今天去国内某知名公司面试了一把，投的职位是前端开发，第一次去大公司面试，受到的感触当然是十分多多，感触稍后补齐，整个过程没啥有难度的技术问题，可能和该公司的产品方向有关吧(补充下，该公司主打不是做web的)。

　　二轮面试的时候，产品经理和我提到了他们产品中遇到的一个问题，大概意思是：他们某个功能，在页面做无限循环显示数据的时候，会造成CPU，100%。当时产品经理也只是稍微给我演示了下，因为当时我脑子一直在想，这个问题为啥在自己以前用JS模拟多线程的时候没有出现，所以对他说的相关的信息也没注意听，界面也只是看了个大概，当时我也只提出使用 setTimeout 或 setInterval 来做的话，会避免这个问题，不过距我上次做多线程Demo的日子过的太长，有点模糊了，我也没有百分百把握，所以回家后赶紧翻出以前的代码出来整理出答案，如下：

　　代码简单，我也就懒得写注释了，以下是循环次数和设置DIV innerHTML的2个函数。

以下为引用的内容：
function $(id) {
return document.getElementById(id);
}
var setter = function() {
var ele = $("containder");
return function(count) {
ele.innerHTML = count;
}
}();
var counter = function() {
var count = 0;
return function() {
count++;
setter(count);
};
} ();

　　估计没人会像测试1 这样用，浏览器直接卡死。

　　Test1：

以下为引用的内容：
<script type="text/javascript">
(function() {
while (1) {
counter();
}
})
();
</script>

　　测试二使用 setInterval 方法，CPU使用量和 IE所占内存都很少，一般CPU就是在0-2%之间，和while 的循环基本能达到同样的效果。至于为啥出现这样的原因，小弟不敢妄自猜测，避免误导新人。希望有了解JS引擎的出来讲解讲解…

　　Test2:

以下为引用的内容：
<script type="text/javascript">
(function() {
window.setInterval("counter();", 1);
})();
</script>

　　按照产品经理那样的界面去大概显示数据,大概是有接口会自动提供数据,前端调用处理字符串就好了…

　　Test3完整代码:

以下为引用的内容：
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
var data = [];
var createdata = function() {
data.push(+new Date() + "|" + (+new Date()));
};
var setter = function() {
var ele = $("containder");
var list = [];
return function(text) {
if (!text)
return;
list.push(text);
if (list.length > 10)
list.shift();
ele.innerHTML = list.join("<br/>");
}
} ();
var counter = function() {
var count = 0;
return function() {
count++;
setter(data.shift());
};
} ();
(function() {
window.setInterval("createdata();", 1);
window.setInterval("counter();", 1);
})
();
</script>

　　本文的第二个目的也是给大家提个醒，其实面试很多时候都是问些基础的操作.

　　第一次使这东西，感觉挺麻烦.先测试下都...

　　作者：低调的

------分隔线----------------------------

上一篇 Access使用宏控制程序--1.6.使用宏的几点说明

下一篇 中小企业博客营销实战,不谈理论谈实践

------分隔线----------------------------