javascript 脚本如何进行“等待/sleep()”?

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 3849 days ago, the information mentioned may be changed or developed.

最近在学 js ，拿几个网站写 grease m onkey 脚本练手，发现一个问题是有些网站的数据并不是直接在 html 中呈现的，而是通过 js 加载的，也许这就是所谓的 ajax 吧。

现在问题是，如果我要用自己的脚本处理这部分数据，就必须保证这些数据被网站自己的脚本加载成功了才行，否则我的脚本是看不到这些数据的。

因为 ajax 很多都是异步加载的，所以就算是把函数绑定到 windows. onload 方法上也不一定能保证脚本加载完了数据，现在的方法只能是用 setTimeOut 做个固定延时，但体验不太好，而且不是稳妥的做法。

我希望的做法是用一个 while 循环检查页面内容是否加载成功，这个循环中，如果没有检测到内容，就让 js 脚本睡眠，类似 rtos 中线程主动释放 cpu 控制权一样。否则的话，这个循环就是个一直占用大量 CPU 资源的恶性循环，很容易让浏览器假死。

不过找了一圈好像没有看到这样的函数，我总不能为了实现个 sleep ，自己在 javascript 上写一套类 rtos 调度系统出来吧。我本来想用一堆10~100毫秒的setTimeOut来实现，结果发现这好像还是会让浏览器假死，似乎setTimeout并没有释放CPU资源。

Supplement 1 · Nov 10, 2015

我觉得我大概了解 setTimeOut 如何工作了，不知道对不对：

setTimeOut 这就是个定时器，定时 X 毫秒后执行某个函数。

但这个函数本身是非 block 的，也就是说我如果把它放在 while 循环中的话，理论上是可以无限执行的，执行这个函数本身并不消耗时间，它就是个一次性调度器。

这样就可以解释我在 While 中调用 setTimeOut 为什么会占用大量 CPU 资源了，因为对 CPU 来说 setTimeOut 和其他语句是一样的，这依然是个 CPU 跑满的恶性循环。

Supplement 2 · Nov 10, 2015

参考我 14 楼的代码，相当于这个 while 循环里，脚本在一直 SetTimeOut ，一直定时执行某个函数，这 100 毫秒内 CPU 根本停不下来；
而等到 100 毫秒的时候，实现 SetTimeOut 的函数就开始执行了，这里，嗯，估计有几万个函数在等待执行，不死才怪。

Supplement 3 · Nov 10, 2015

搞定了，用 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...")
}
}
}

脚本

rtos

ajax

sleep

39 replies • 2019-04-19 08:14:11 +08:00

iamcho

Nov 10, 2015

.done()

phithon

Nov 10, 2015

学 javascript ，心里必须有“回调函数”的概念。
比如你进行的 ajax 操作，需要等待服务端返回包再处理数据。
那你应该把处理数据的代码放在 ajax 的回调函数里，而不是像其他同步语言一样写在 ajax 代码后一行。

leavic

Nov 10, 2015

@iamcho 请问这是 jQuery 里的函数吗？有没有纯 js 的实现？

leavic

Nov 10, 2015

@phithon 我写的是 grease monkey 脚本，和网站服务器是独立的两个部分，网站的 ajax 操作，怎么能设置我的函数作为回调呢？
BTW ，抛开回调的概念，难道就没有这种方法吗？因为交出 cpu 控制权做一个简单的 sleep ，这几乎在所有语言里都有，就算在 C 里也很容易实现。

zzNucker

Nov 10, 2015

@leavic JS 你还想让它交出 CPU 控制权，你想让浏览器 block 么

ericls

Nov 10, 2015

js 是 non-blocking 是单线程的，如果你 sleep 了那全部都会 block 住。。。

coolicer

Nov 10, 2015

@leavic 浏览器如果有这个 sleep 应该会把界面卡住吧，所以没发现可以这样。可以用一下 es6 的生成器，可以暂停 /重新执行函数。

ChefIsAwesome

Nov 10, 2015

你光用 setTimeOut 怎么可能让浏览器假死

frozen2013

Nov 10, 2015

之前某墙攻击 github 的方法也是 setTimeout 来实现的，从没有人说那段循环加载导致引用那段 js 的网页死掉啊。 http://drops.wooyun.org/papers/5398
恐怕你在 setTimeout 引的 function 里做了太多耗时的计算工作了，你可以用 settimeout 来循环检查是某资源否加载完毕，确定加载完毕后再去做其他耗时的计算工作。

hronro

Nov 10, 2015

xmhttp.onreadystatechange = function(){

}

hronro

Nov 10, 2015

我字还没打完怎么就发出去了
XMLHttp.onreadystatechange = function(){
if(XMLHttp.readyState==4 && XMLHttp.status==200){
//这里填完成数据加载后执行的内容
}
};

Cloudee

Nov 10, 2015

你是不是在 while 里面 setTimeout 了……你在函数的最后 setTimeout 这个函数自己。
或者不用 while 循环用 setInterval

hronro

Nov 10, 2015

js 是单线程，但是可以是异步的。像 AJAX 就是典型的异步执行

leavic

Nov 10, 2015

@ChefIsAwesome

while(True)
{
if(check_something()==False)
{
setTimeOut(nop_function,100)
}
}

执行到这段明显卡住了，我希望的是 check_something 为 false 之后就 sleep 100 毫秒，这样占用的 CPU 时间顶多是有限次的 check_something()函数的执行时间，但实际看来并不是这样。

leavic

Nov 10, 2015

@frozen2013 我就是做了个很简单的 a=2,if(a==1) alert('something')，基本上只有一个赋值和一个判断命令会被使用，我就把这段话当 nop 用了。

hronro

Nov 10, 2015

@leavic JS 里应该没有 sleep 这样的东西

breeswish

Nov 10, 2015

alert 会阻塞

leavic

Nov 10, 2015

@Cloudee 是的，我不是很清楚 setTimeOut 的工作方式，我以为这个函数可以实现非 block 的 sleep

Cloudee

Nov 10, 2015

@leavic 不是这样， setTimeout 是立即返回，并且在调度队列里面加上一个 n 毫秒后的任务，所以相当于你这个在不停地执行，并且不停地往调度队列里面添加新的任务。你的这个需求可以考虑用 setInterval ，并在函数体里面判断条件是不是满足，不满足就直接返回，满足再执行里面的逻辑。

leavic

Nov 10, 2015

@Cloudee 对，我刚刚想明白这点，这样可以解释为什么 while 会卡死了， setTimeOut 对 CPU 来说和其他语句是一样的。我确实该试试 setInterval ，谢谢！

leavic

Nov 10, 2015

@breeswish 不是这个问题，因为 alert 是绝对不会被执行的，问题出在 setTimeOut 是非阻塞的。

nisnaker

Nov 10, 2015

var t;
t = setInterval(function(){
if(check_something() == true) {
clearInterval(t);
// your funcs
}
}, 1000);

大概这样。

GtDzx

Nov 10, 2015

@leavic 建议你花个一天时间读读《 JavaScript The Definitive Guide 》，尤其是第 17 章 Handling Events 。浏览器端 JS 的事件驱动编程模型和一般的 C 语言程序有很大不同，我自己一开始也似懂非懂一知半解。与其针对一个具体例子分析来分析去，不如踏踏实实从头学习来的快。

frozen2013

Nov 10, 2015

额，你感到浏览器假死是因为 while （ true ）生成了 n 多个 setTimeout,这个锅不能 setTimeout 来背.

用 settimeout 做定时器要这么写
function fn() {
if (check_something()===false) {
timer = setTimeout(fn, 100);
}
else {
//TODO
}
}
var timer = setTimeout(fn, 100);

leavic

Nov 10, 2015

@GtDzx 谢谢建议。

其实我自己用 C 写过简单的 RTOS ，所以调度系统对我来说是没什么难度的，用 RTOS 的思想做支撑，这些东西其实很容易理解，有点像练武的人打通任督二脉:)

我今天这个问题主要是没先检查 setTimeOut 函数是不是阻塞的，现在已经搞定了。

leavic

Nov 10, 2015

@frozen2013 对的，我改用 setInterval 就好了。

Biwood

Nov 10, 2015

用 while 循环不就阻塞了整个 JavaScript 线程么，本来就是单线程，你这么一搞别的 js 代码都无法执行了。用定时器也不是什么好办法，频率高的话一样很影响性能。应该会有一些比较 hack 的方法可以解决你的问题，但是我觉得这种操作太敏感了吧，直接捕捉别人网站的数据？

pagxir

Nov 10, 2015 via Android

很明显，以楼主目前的水平，很难跟他解释清楚。

leavic

Nov 10, 2015

@Biwood 只是过滤掉我不想要的内容

leavic

Nov 10, 2015

@Biwood 我用定时器坐下来效果很好了，因为本身操作量就很小。

xiumushenzuo

Nov 10, 2015

建议题主还是看一下 23 楼推荐的内容，这和 RTOS 并不同，并不是多线程多任务的问题。
你现在的方式的确可以达到效果，但消耗了很多浏览器资源，而且不够优雅，并不是 js 这个语言通用的解决方案。

leavic

Nov 10, 2015

@xiumushenzuo 谢谢，我会去看的。

FrankFang128

Nov 10, 2015

永远不要在 JS 实现 Sleep

maplerecall

Nov 10, 2015

在 js 中用循环和模拟 sleep 的方式判断是否加载完成是十分不对的， js 由于其特性与使用场景所需要的编程思想与 c 等非脚本语言是不太一样的。

lz 题目中描述的需求实际上是不需要任何 setTimeout 和 setInvertal 的，所要做的只是让这些 ajax 请求加载完成后来主动执行需要的操作。 23 楼的内容应该会有不少帮助~

maplerecall

Nov 10, 2015

@maplerecall 啊抱歉没看清楚前提_(:3 」∠)_
如果是 grease monkey 这种插入式脚本可以通过监听 DOMNodeInserted 事件来判断是否已处理完请求到数据
不过我记得这个似乎可以在页面加载前就执行？也许可以直接复写浏览器的 XMLHttpRequest 来直接获取请求数据 XD

leavic

Nov 10, 2015

@maplerecall 但这还有个问题，例如京东页面上的无货提示，就是 js 加载出来的，但并不是一定会有无货提示出现(碰上全有货的话)，这种情况下，是不是 DOMNodeInserted 事件就不一定发生了。

zhuangzhuang1988

Nov 10, 2015

用下老赵的 winjs

dqh3000

Nov 10, 2015

其实我很想说等到 es6 的 yield 或者 es7 的 async 就好了……

不过大家的回答好像都跟我想的不一样……

@FrankFang128

SuperMonster009

Apr 19, 2019 via Android

mdn 提到可以用 promise