基础面试题:避免js无限循环引起的假死或cpu100%

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

 

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

 

 

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

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

 1function $(id) {
 2
 3            return document.getElementById(id);
 4
 5        }
 6
 7        var setter = function() { 
 8
 9            var ele = $("containder");
10
11            return function(count) {
12
13                ele.innerHTML = count;
14
15            }
16
17        }();
18
19        var counter = function() {
20
21            var count = 0;
22
23            return function() {
24
25                count++;
26
27                setter(count);
28
29            };
30
31        } ();
32
33

 

 

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

Test1：

   

 1<script type="text/javascript">
 2
 3       (function() {
 4
 5            while (1) {
 6
 7                counter();
 8
 9            }
10
11        })
12
13        ();
14
15</script>
16
17

 

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

Test2:

 

 

 1<script type="text/javascript">
 2
 3        (function() {
 4
 5            window.setInterval("counter();", 1);
 6
 7        })();
 8
 9</script>
10

 

 

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

Test3完整代码:

 

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

    

 1<script type="text/javascript">
 2
 3        function $(id) {
 4
 5            return document.getElementById(id);
 6
 7        } 
 8
 9        var data = [];
10
11        var createdata = function() {
12
13            data.push(+new Date() + "|" + (+new Date()));
14
15        };
16
17        var setter = function() {
18
19            var ele = $("containder");
20
21            var list = [];
22
23            return function(text) {
24
25                if (!text)
26
27                    return;
28
29                list.push(text);
30
31                if (list.length > 10)
32
33                    list.shift();
34
35                ele.innerHTML = list.join("<br/>");
36
37            }
38
39        } ();
40
41        var counter = function() {
42
43            var count = 0;
44
45            return function() {
46
47                count++;
48
49                setter(data.shift());
50
51            };
52
53        } ();
54
55        (function() {
56
57            window.setInterval("createdata();", 1);
58
59            window.setInterval("counter();", 1);
60
61        })
62
63        ();
64
65    </script>
66
67
68 
69

 

 

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

 

 

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