zoukankan      html  css  js  c++  java
  • 浏览器的“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

  • 相关阅读:
    USACO Milk2 区间合并
    Codeforces 490B Queue【模拟】
    HDU 3974 Assign the task 简单搜索
    HDU 5119 Happy Matt Friends(2014北京区域赛现场赛H题 裸背包DP)
    Cin、Cout 加快效率方法
    POJ 1159 回文LCS滚动数组优化
    POJ 2479 不相交最大子段和
    POJ 1458 最长公共子序列 LCS
    在阿里最深刻的,还是职场之道给我的震撼
    精细化
  • 原文地址:https://www.cnblogs.com/rulee/p/browser-sleep.html
Copyright © 2011-2022 走看看