国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > jscript > 避免js无限循环引起的假死或cpu100%

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

来源:程序员人生   发布时间:2014-04-14 00:46:46 阅读次数:4244次

  本文内容很简单,只是对面试中遇到的一个记不清楚的问题的复习,鉴于是俺第一次在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完整代码:

  <div id="containder" style="overflow:scroll;"></div>

以下为引用的内容:
<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>

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

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

  作者:低调的

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生