浏览器的“sleep”

本文源于一个前两天同事的问题:

C#里面

while (condition) {
   Thread.Sleep(100);
}
// do something

在javascript里面怎么实现比较好

 

这是一个比较奇怪的为问题,当是第一个出现在脑海里的是 setTimeout,也就是如下代码(setInterval也是类似的实现):

不过这样有问题,这是一个异步的回调,同事需要的是浏览器有 blocking 的效果,当是没有太多的考虑就觉得没办法实现了。

setTimeout(function () {
    if (condition) {
        setTimeout(arguments.callee, 100);
        return;
    }
    // do something
}, 100);

 

今天再次想起那个问题,在园子里找了一下,发现有各种实现方式,不过实现方式都实在不敢恭维~~

总结了浏览器有 blocking 效果的几个方式:

1. 各种原生的消息弹出框,比如 alert,confirm,prompt

2. 模式窗体,showModalDialog

3. XMLHttpRequest 的同步请求

4. 看到园子里有人直接while(condition){}, 汗~~

 

而第3点就是这个问题的突破点,XHR的open方法有一个指定是否为同步方式的参数,详见MDN

void open(
   DOMString method,
   DOMString url,
   optional boolean async,
   optional DOMString user,
   optional DOMString password
);

 

于是乎实现变得简单了,这里需要有一个真实的地址共供XHR使用,

public class HomeController : Controller {

    public ActionResult Wait(int sleep) {
        System.Threading.Thread.Sleep(sleep);
        return new EmptyResult();
    }
}

 

然后是客户端的js代码:(注意需要设置timeout,以增加计时的准确性)

function sleep(time, done) {
    var xhr = new XMLHttpRequest();
    xhr.timeout = time;
    xhr.onerror = done;
    xhr.onload = done;
    xhr.open('GET', '/Home/Wait?sleep=' + time, false);
    xhr.send('');
}

或是用jquery更方便:

function sleep(time, done) {
    $.ajax({
        async: false,
        url: '/Home/Wait?sleep=' + time,
        timeout: time,
        error: done,
        success: done
    });
}

 

最后这样使用:

sleep(100, function () {
    if (condition) {
        sleep(100, arguments.callee);
        return;
    }
    // do something
});

 

这算是个比较另类的实现方式,不知道谁有更好的实现,请留言赐教!谢谢了!

 

参考:

https://developer.mozilla.org/zh-CN/docs/DOM/XMLHttpRequest

 

posted on 2014-05-12 16:15  rulee  阅读(1424)  评论(4编辑  收藏  举报