推荐关注 Meteor JSLint - a Javascript code quality tool jsFiddle D3.js WebStorm 推荐书目 Javascript 权威指南第 5 版
Closure: The Definitive Guide
Closure: The Definitive Guide 
这是一个创建于 3630 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近在学 js ，拿几个网站写 grease m onkey 脚本练手，发现一个问题是有些网站的数据并不是直接在 html 中呈现的，而是通过 js 加载的，也许这就是所谓的 ajax 吧。
现在问题是，如果我要用自己的脚本处理这部分数据，就必须保证这些数据被网站自己的脚本加载成功了才行，否则我的脚本是看不到这些数据的。
因为 ajax 很多都是异步加载的，所以就算是把函数绑定到 windows. onload 方法上也不一定能保证脚本加载完了数据，现在的方法只能是用 setTimeOut 做个固定延时，但体验不太好，而且不是稳妥的做法。
我希望的做法是用一个 while 循环检查页面内容是否加载成功，这个循环中，如果没有检测到内容，就让 js 脚本睡眠，类似 rtos 中线程主动释放 cpu 控制权一样。否则的话，这个循环就是个一直占用大量 CPU 资源的恶性循环，很容易让浏览器假死。
不过找了一圈好像没有看到这样的函数，我总不能为了实现个 sleep ，自己在 Javascript 上写一套类 rtos 调度系统出来吧。我本来想用一堆10~100毫秒的setTimeOut来实现，结果发现这好像还是会让浏览器假死，似乎setTimeout并没有释放CPU资源。
现在问题是，如果我要用自己的脚本处理这部分数据，就必须保证这些数据被网站自己的脚本加载成功了才行，否则我的脚本是看不到这些数据的。
因为 ajax 很多都是异步加载的，所以就算是把函数绑定到 windows. onload 方法上也不一定能保证脚本加载完了数据，现在的方法只能是用 setTimeOut 做个固定延时，但体验不太好，而且不是稳妥的做法。
我希望的做法是用一个 while 循环检查页面内容是否加载成功，这个循环中，如果没有检测到内容，就让 js 脚本睡眠，类似 rtos 中线程主动释放 cpu 控制权一样。否则的话，这个循环就是个一直占用大量 CPU 资源的恶性循环，很容易让浏览器假死。
不过找了一圈好像没有看到这样的函数，我总不能为了实现个 sleep ，自己在 Javascript 上写一套类 rtos 调度系统出来吧。我本来想用一堆10~100毫秒的setTimeOut来实现，结果发现这好像还是会让浏览器假死，似乎setTimeout并没有释放CPU资源。
第 1 条附言 2015-11-10 15:29:35 +08:00
我觉得我大概了解 setTimeOut 如何工作了，不知道对不对：
setTimeOut 这就是个定时器，定时 X 毫秒后执行某个函数。
但这个函数本身是非 block 的，也就是说我如果把它放在 while 循环中的话，理论上是可以无限执行的，执行这个函数本身并不消耗时间，它就是个一次性调度器。
这样就可以解释我在 While 中调用 setTimeOut 为什么会占用大量 CPU 资源了，因为对 CPU 来说 setTimeOut 和其他语句是一样的，这依然是个 CPU 跑满的恶性循环。
setTimeOut 这就是个定时器，定时 X 毫秒后执行某个函数。
但这个函数本身是非 block 的，也就是说我如果把它放在 while 循环中的话，理论上是可以无限执行的，执行这个函数本身并不消耗时间，它就是个一次性调度器。
这样就可以解释我在 While 中调用 setTimeOut 为什么会占用大量 CPU 资源了，因为对 CPU 来说 setTimeOut 和其他语句是一样的，这依然是个 CPU 跑满的恶性循环。
第 2 条附言 2015-11-10 15:33:05 +08:00
参考我 14 楼的代码，相当于这个 while 循环里，脚本在一直 SetTimeOut ，一直定时执行某个函数，这 100 毫秒内 CPU 根本停不下来；
而等到 100 毫秒的时候，实现 SetTimeOut 的函数就开始执行了，这里，嗯，估计有几万个函数在等待执行，不死才怪。
而等到 100 毫秒的时候，实现 SetTimeOut 的函数就开始执行了，这里，嗯，估计有几万个函数在等待执行，不死才怪。
第 3 条附言 2015-11-10 15:47:31 +08:00
搞定了，用 setInterval 就行了：
window. Onload= my_bug
function my_bug() {
console.log("OK!")
task = setInterval(check_data, 100)
function check_data() {
links = document.getElementsByTagName("a")
if (links.length >= 10) {
clearInterval(task)
for (var i = 0; i < links.length; i++) {
orig_link = links[i].getAttribute('href')
clean_link = orig_link.split("=")[3]
console.log(clean_link)
links[i].setAttribute('href', clean_link)
}
}
else
{
console.log("Checking...")
}
}
}
window. Onload= my_bug
function my_bug() {
console.log("OK!")
task = setInterval(check_data, 100)
function check_data() {
links = document.getElementsByTagName("a")
if (links.length >= 10) {
clearInterval(task)
for (var i = 0; i < links.length; i++) {
orig_link = links[i].getAttribute('href')
clean_link = orig_link.split("=")[3]
console.log(clean_link)
links[i].setAttribute('href', clean_link)
}
}
else
{
console.log("Checking...")
}
}
}
 | 1 iamcho 2015-11-10 14:50:17 +08:00 .done() |
 | 2 phithon 2015-11-10 14:51:52 +08:00 学 Javascript ，心里必须有“回调函数”的概念。 比如你进行的 ajax 操作，需要等待服务端返回包再处理数据。 那你应该把处理数据的代码放在 ajax 的回调函数里，而不是像其他同步语言一样写在 ajax 代码后一行。 |
 | 4 leavic OP @phithon 我写的是 grease monkey 脚本，和网站服务器是独立的两个部分，网站的 ajax 操作，怎么能设置我的函数作为回调呢？ BTW ，抛开回调的概念，难道就没有这种方法吗？因为交出 cpu 控制权做一个简单的 sleep ，这几乎在所有语言里都有，就算在 C 里也很容易实现。 |
 | 6 ericls 2015-11-10 15:02:16 +08:00 js 是 non-blocking 是单线程的，如果你 sleep 了 那全部都会 block 住。。。 |
 | 7 coolicer 2015-11-10 15:03:49 +08:00 @leavic 浏览器如果有这个 sleep 应该会把界面卡住吧，所以没发现可以这样。可以用一下 es6 的生成器，可以暂停 /重新 执行函数。 |
 | 8 ChefIsAwesome 2015-11-10 15:12:03 +08:00 你光用 setTimeOut 怎么可能让浏览器假死 |
 | 9 frozen2013 2015-11-10 15:13:33 +08:00 之前某墙攻击 github 的方法也是 setTimeout 来实现的，从没有人说那段循环加载导致引用那段 js 的网页死掉啊。 http://drops.wooyun.org/papers/5398 恐怕你在 setTimeout 引的 function 里做了太多耗时的计算工作了，你可以用 settimeout 来循环检查是某资源否加载完毕，确定加载完毕后再去做其他耗时的计算工作。 |
 | 10 hronro 2015-11-10 15:16:25 +08:00 xmhttp.Onreadystatechange= function(){ } |
| 11 hronro 2015-11-10 15:19:01 +08:00  1 我字还没打完怎么就发出去了 XMLHttp.Onreadystatechange= function(){ if(XMLHttp.readyState==4 && XMLHttp.status==200){ //这里填完成数据加载后执行的内容 } }; |
 | 12 Cloudee 2015-11-10 15:20:45 +08:00 你是不是在 while 里面 setTimeout 了……你在函数的最后 setTimeout 这个函数自己。 或者不用 while 循环用 setInterval |
| 13 hronro 2015-11-10 15:21:31 +08:00 js 是单线程，但是可以是异步的。像 AJAX 就是典型的异步执行 |
| 14 leavic OP @ChefIsAwesome while(True) { if(check_something()==False) { setTimeOut(nop_function,100) } } 执行到这段明显卡住了，我希望的是 check_something 为 false 之后就 sleep 100 毫秒，这样占用的 CPU 时间顶多是有限次的 check_something()函数的执行时间，但实际看来并不是这样。 |
| 15 leavic OP @frozen2013 我就是做了个很简单的 a=2,if(a==1) alert('something')，基本上只有一个赋值和一个判断命令会被使用，我就把这段话当 nop 用了。 |
 | 17 breeswish 2015-11-10 15:25:47 +08:00 alert 会阻塞 |
| 18 leavic OP @Cloudee 是的，我不是很清楚 setTimeOut 的工作方式，我以为这个函数可以实现非 block 的 sleep |
| 19 Cloudee 2015-11-10 15:29:14 +08:00 1 @leavic 不是这样， setTimeout 是立即返回，并且在调度队列里面加上一个 n 毫秒后的任务，所以相当于你这个在不停地执行，并且不停地往调度队列里面添加新的任务。你的这个需求可以考虑用 setInterval ，并在函数体里面判断条件是不是满足，不满足就直接返回，满足再执行里面的逻辑。 |
| 20 leavic OP @Cloudee 对，我刚刚想明白这点，这样可以解释为什么 while 会卡死了， setTimeOut 对 CPU 来说和其他语句是一样的。我确实该试试 setInterval ，谢谢！ |
 | 22 nisnaker 2015-11-10 15:35:54 +08:00 var t; t = setInterval(function(){ if(check_something() == true) { clearInterval(t); // your funcs } }, 1000); 大概这样。 |
 | 23 GtDzx 2015-11-10 15:38:15 +08:00 @leavic 建议你花个一天时间读读《 Javascript The Definitive Guide 》，尤其是第 17 章 Handling Events 。浏览器端 JS 的事件驱动编程模型和一般的 C 语言程序有很大不同，我自己一开始也似懂非懂一知半解。与其针对一个具体例子分析来分析去，不如踏踏实实从头学习来的快。 |
| 24 frozen2013 2015-11-10 15:43:39 +08:00 额，你感到浏览器假死是因为 while （ true ）生成了 n 多个 setTimeout,这个锅不能 setTimeout 来背. 用 settimeout 做定时器要这么写 function fn() { if (check_something()===false) { timer = setTimeout(fn, 100); } else { //TODO } } var timer = setTimeout(fn, 100); |
| 25 leavic OP @GtDzx 谢谢建议。 其实我自己用 C 写过简单的 RTOS ，所以调度系统对我来说是没什么难度的，用 RTOS 的思想做支撑，这些东西其实很容易理解，有点像练武的人打通任督二脉:) 我今天这个问题主要是没先检查 setTimeOut 函数是不是阻塞的，现在已经搞定了。 |
| 26 leavic OP @frozen2013 对的，我改用 setInterval 就好了。 |
 | 27 Biwood 2015-11-10 16:00:23 +08:00 用 while 循环不就阻塞了整个 Javascript 线程么，本来就是单线程，你这么一搞别的 js 代码都无法执行了。用定时器也不是什么好办法，频率高的话一样很影响性能。应该会有一些比较 hack 的方法可以解决你的问题，但是我觉得这种操作太敏感了吧，直接捕捉别人网站的数据？ |
 | 28 pagxir 2015-11-10 16:07:57 +08:00 via Android 很明显，以楼主目前的水平，很难跟他解释清楚。 |
 | 31 xiumushenzuo 2015-11-10 17:20:21 +08:00 建议题主还是看一下 23 楼推荐的内容，这和 RTOS 并不同，并不是多线程多任务的问题。 你现在的方式的确可以达到效果，但消耗了很多浏览器资源，而且不够优雅，并不是 js 这个语言通用的解决方案。 |
| 32 leavic OP @xiumushenzuo 谢谢，我会去看的。 |
 | 33 FrankFang128 2015-11-10 18:55:38 +08:00 永远不要在 JS 实现 Sleep |
 | 34 maplerecall 2015-11-10 21:06:23 +08:00 在 js 中用循环和模拟 sleep 的方式判断是否加载完成是十分不对的， js 由于其特性与使用场景所需要的编程思想与 c 等非脚本语言是不太一样的。 lz 题目中描述的需求实际上是不需要任何 setTimeout 和 setInvertal 的，所要做的只是让这些 ajax 请求加载完成后来主动执行需要的操作。 23 楼的内容应该会有不少帮助~ |
| 35 maplerecall 2015-11-10 21:17:57 +08:00 @maplerecall 啊抱歉没看清楚前提_(:3 」∠)_ 如果是 grease monkey 这种插入式脚本可以通过监听 DOMNodeInserted 事件来判断是否已处理完请求到数据 不过我记得这个似乎可以在页面加载前就执行？也许可以直接复写浏览器的 XMLHttpRequest 来直接获取请求数据 XD |
| 36 leavic OP @maplerecall 但这还有个问题，例如京东页面上的无货提示，就是 js 加载出来的，但并不是一定会有无货提示出现(碰上全有货的话)，这种情况下，是不是 DOMNodeInserted 事件就不一定发生了。 |
 | 37 zhuangzhuang1988 2015-11-10 21:41:39 +08:00 用下老赵的 winjs |
 | 38 dqh3000 2015-11-10 22:09:06 +08:00 |
 | 39 SuperMonster009 2019-04-19 08:14:11 +08:00 via Android mdn 提到可以用 promise |
Select Language