关于JavaScript中实现异步处理、同步等待是否可以？

yyfzy 2016-03-07 10:06:31

我目前有个需求，是客户端JS和服务器端的之间通过websocket通信（服务器端不是Web服务器，也不可能配置为Web服务器）：客户端发送一个操作请求消息、服务器端接到消息之后处理并返回一个结果。

由于JS是单线程顺序处理、而网络通信又是异步的，怎么样我才能让客户端的JS程序在发送一个命令之后、等待服务器返回结果之后再往下执行（类似C++/Java中的WaitForEvent）？

用个栗子说明下：

var _socket;

function init () {
// 创建一个Socket实例，尝试连接服务器
_websocket = new WebSocket('ws://127.0.0.1:' + _serverPort);

// 握手成功
_websocket.onopen = function (e) {
_isConnected = true;
};

// 监听消息
_websocket.onmessage = function(event) {
_isResponded = true;
_respData = event.data;
};

// 监听Socket的关闭
_websocket.onclose = function(event) {
socket = null;
alert("连接关闭！");
};
}

function waitForResp() {
while(!_isResponded) {}; //这样写是不行的，因为JS不能响应socket的onmessage事件了！！！
}

function getServerTime() {
var time;
_websocket.send("{get_time}"); //1
waitForResp(); //2
//此处处理响应数据 //3
return time; //4
}

上面的代码，我是想调用getServerTime()等得到服务器响应之后才返回，也就是说该函数本身希望是阻塞（同步）的。然后，等待函数 waitForResp()该怎么实现才能保证在JS等待的同时还能响应onmessage()事件呢？

谢谢！

...全文

2997 20 打赏收藏转发到动态举报

写回复

用AI写文章

20 条回复

切换为时间正序

请发表友善的回复…

发表回复

gogo111007 2017-07-17

打赏
举报

楼主有找到办法吗？我也想知道js能不能阻塞等待信号量。我现在是通过 c++实现js方法来实现阻塞等待的。

天际的海浪 2016-03-10

打赏
举报

引用 14 楼 yyfzy 的回复:

[quote=引用 13 楼 showbo 的回复:] [quote=引用 12 楼 yyfzy 的回复:] [quote=引用 11 楼 showbo 的回复:] 肯定是居于回调了，做个函数，指令和回调存储起来，onmessage中服务器端同时返回指令和名称，然后通过返回的指令获取回调执行

  var _socket;

    function init() {
        // 创建一个Socket实例，尝试连接服务器
        _websocket = new WebSocket('ws://127.0.0.1:' + _serverPort);

        // 握手成功
        _websocket.onopen = function (e) {
            _isConnected = true;
        };

        // 监听消息
        _websocket.onmessage = function (event) {
            _isResponded = true;
            _respData = event.data;
////////////////////////////////////////////////////////////////
            var data = JSON.parse(_respData);//服务器端返回类似{"cmd":"发送的指令名称","data":"数据，也可以为json格式字符串"}的json字符串，然后JSON.parse转为json对象
            MessageList[data.cmd](data.data);//执行回调
////////////////////////////////////////////////////////////////
        };

        // 监听Socket的关闭
        _websocket.onclose = function (event) {
            socket = null;
            alert("连接关闭！");
        };
    }
////////////////////////////////////////////////////////////////
    var MessageList = {};
    function SendMsg(cmd, callback) {
        MessageList[cmd] = callback;
        _websocket.send(cmd);
    }
    SendMsg("{get_time}", function (data) {
        console.log(data)
    })
////////////////////////////////////////////////////////////////

回调我知道，我的问题不是“怎么处理响应数据”；而是“在处理完响应数据之前如何阻塞JS进程、一直等待而又能响应onmessage事件”。[/quote] 目前来说无解，单线程的，只能居于回调。除非你等待浏览器厂商全部实现es6标准，就可以用promise对象 http://es6.ruanyifeng.com/#docs/promise[/quote] JS里没有办法主动去查询是否有事件到来？比如C++里可以GetMessage()来查询是否有消息、如果有就处理、没有就继续阻塞。在Windows下，如果使用C++开发程序，在主线程中等待一个事情的发生时，如果直接用： bool bContinue = false; ...... while (!bContinue){Sleep(1000)}; 这样也会导致主线程无法响应其他改变bContinue状态的事件，导致挂机。但是如果加上消息循环，主线程在等的同时去主动查询是否有消息要处理，就不会出现这个情况。比如： ULONG WaitFor(bool flag) { MSG msg; while (!flag) { if (PeekMessage(&msg, NULL, 0, 0, PM_REMOVE)) { TranslateMessage(&msg); DispatchMessage(&msg); } } return 0; } bool bContinue = false; .......... WaitFor(bContine); ........... 这样的等待就不会导致挂机，因为当其他线程发送消息（事件）时，主线程能响应、标记bContinue 能被改变！我现在在JS中就是要实现这么一个等待函数，如果JS中能主动查询事件、并处理，就可以满足我的要求。谢谢！！！[/quote] js目前没有这种功能。。

斯洛文尼亚旅游 2016-03-10

打赏
举报

引用 15 楼 yyfzy 的回复:

还有人知道吗?

不是说了js目前没办法做到，要等es6的普及。。

yyfzy 2016-03-09

打赏
举报

还有人知道吗?

yyfzy 2016-03-08

打赏
举报

引用 13 楼 showbo 的回复:

[quote=引用 12 楼 yyfzy 的回复:] [quote=引用 11 楼 showbo 的回复:] 肯定是居于回调了，做个函数，指令和回调存储起来，onmessage中服务器端同时返回指令和名称，然后通过返回的指令获取回调执行

  var _socket;

    function init() {
        // 创建一个Socket实例，尝试连接服务器
        _websocket = new WebSocket('ws://127.0.0.1:' + _serverPort);

        // 握手成功
        _websocket.onopen = function (e) {
            _isConnected = true;
        };

        // 监听消息
        _websocket.onmessage = function (event) {
            _isResponded = true;
            _respData = event.data;
////////////////////////////////////////////////////////////////
            var data = JSON.parse(_respData);//服务器端返回类似{"cmd":"发送的指令名称","data":"数据，也可以为json格式字符串"}的json字符串，然后JSON.parse转为json对象
            MessageList[data.cmd](data.data);//执行回调
////////////////////////////////////////////////////////////////
        };

        // 监听Socket的关闭
        _websocket.onclose = function (event) {
            socket = null;
            alert("连接关闭！");
        };
    }
////////////////////////////////////////////////////////////////
    var MessageList = {};
    function SendMsg(cmd, callback) {
        MessageList[cmd] = callback;
        _websocket.send(cmd);
    }
    SendMsg("{get_time}", function (data) {
        console.log(data)
    })
////////////////////////////////////////////////////////////////

斯洛文尼亚旅游 2016-03-08

打赏
举报

引用 12 楼 yyfzy 的回复:

[quote=引用 11 楼 showbo 的回复:] 肯定是居于回调了，做个函数，指令和回调存储起来，onmessage中服务器端同时返回指令和名称，然后通过返回的指令获取回调执行

  var _socket;

    function init() {
        // 创建一个Socket实例，尝试连接服务器
        _websocket = new WebSocket('ws://127.0.0.1:' + _serverPort);

        // 握手成功
        _websocket.onopen = function (e) {
            _isConnected = true;
        };

        // 监听消息
        _websocket.onmessage = function (event) {
            _isResponded = true;
            _respData = event.data;
////////////////////////////////////////////////////////////////
            var data = JSON.parse(_respData);//服务器端返回类似{"cmd":"发送的指令名称","data":"数据，也可以为json格式字符串"}的json字符串，然后JSON.parse转为json对象
            MessageList[data.cmd](data.data);//执行回调
////////////////////////////////////////////////////////////////
        };

        // 监听Socket的关闭
        _websocket.onclose = function (event) {
            socket = null;
            alert("连接关闭！");
        };
    }
////////////////////////////////////////////////////////////////
    var MessageList = {};
    function SendMsg(cmd, callback) {
        MessageList[cmd] = callback;
        _websocket.send(cmd);
    }
    SendMsg("{get_time}", function (data) {
        console.log(data)
    })
////////////////////////////////////////////////////////////////

yyfzy 2016-03-08

打赏
举报

引用 11 楼 showbo 的回复:

肯定是居于回调了，做个函数，指令和回调存储起来，onmessage中服务器端同时返回指令和名称，然后通过返回的指令获取回调执行

  var _socket;

    function init() {
        // 创建一个Socket实例，尝试连接服务器
        _websocket = new WebSocket('ws://127.0.0.1:' + _serverPort);

        // 握手成功
        _websocket.onopen = function (e) {
            _isConnected = true;
        };

        // 监听消息
        _websocket.onmessage = function (event) {
            _isResponded = true;
            _respData = event.data;
////////////////////////////////////////////////////////////////
            var data = JSON.parse(_respData);//服务器端返回类似{"cmd":"发送的指令名称","data":"数据，也可以为json格式字符串"}的json字符串，然后JSON.parse转为json对象
            MessageList[data.cmd](data.data);//执行回调
////////////////////////////////////////////////////////////////
        };

        // 监听Socket的关闭
        _websocket.onclose = function (event) {
            socket = null;
            alert("连接关闭！");
        };
    }
////////////////////////////////////////////////////////////////
    var MessageList = {};
    function SendMsg(cmd, callback) {
        MessageList[cmd] = callback;
        _websocket.send(cmd);
    }
    SendMsg("{get_time}", function (data) {
        console.log(data)
    })
////////////////////////////////////////////////////////////////

回调我知道，我的问题不是“怎么处理响应数据”；而是“在处理完响应数据之前如何阻塞JS进程、一直等待而又能响应onmessage事件”。

yyfzy 2016-03-07

打赏
举报

引用 2 楼 Free_Wind22 的回复:

用回调函数在getServerTime接收一个callback,在onmessage时调用

即使这样做，函数getServerTime()还是会在send()之后马上返回！而我的要求是等处理完服务器的响应数据之后、函数getServerTime()才返回。

囧 2016-03-07

打赏
举报

用回调函数在getServerTime接收一个callback,在onmessage时调用

yyfzy 2016-03-07

打赏
举报

顺便说一句！一般人们会建议我，在send一个命令之后马上返回、然后等响应时间触发之后再处理（使用回调函数）、也就是说异步执行，让页面步等待。但是我希望的是用户在一个操作完成之前、不能进行其他操作，所以希望每个JS函数都是同步（阻塞）的。不希望用户发送一个命令之后就不管结果、页面还能接受用户其他操作。

斯洛文尼亚旅游 2016-03-07

打赏
举报

肯定是居于回调了，做个函数，指令和回调存储起来，onmessage中服务器端同时返回指令和名称，然后通过返回的指令获取回调执行

  var _socket;

    function init() {
        // 创建一个Socket实例，尝试连接服务器
        _websocket = new WebSocket('ws://127.0.0.1:' + _serverPort);

        // 握手成功
        _websocket.onopen = function (e) {
            _isConnected = true;
        };

        // 监听消息
        _websocket.onmessage = function (event) {
            _isResponded = true;
            _respData = event.data;
////////////////////////////////////////////////////////////////
            var data = JSON.parse(_respData);//服务器端返回类似{"cmd":"发送的指令名称","data":"数据，也可以为json格式字符串"}的json字符串，然后JSON.parse转为json对象
            MessageList[data.cmd](data.data);//执行回调
////////////////////////////////////////////////////////////////
        };

        // 监听Socket的关闭
        _websocket.onclose = function (event) {
            socket = null;
            alert("连接关闭！");
        };
    }
////////////////////////////////////////////////////////////////
    var MessageList = {};
    function SendMsg(cmd, callback) {
        MessageList[cmd] = callback;
        _websocket.send(cmd);
    }
    SendMsg("{get_time}", function (data) {
        console.log(data)
    })
////////////////////////////////////////////////////////////////

yyfzy 2016-03-07

打赏
举报

引用 9 楼 jslang 的回复:

[quote=引用 7 楼 yyfzy 的回复:] [quote=引用 5 楼 jslang 的回复:] 为什么要用阻塞的，长时间阻塞会让浏览器无响应。你用回调函数不好么。

不好，因为我的js和服务器之间的“发送消息-处理响应”是一个原子操作，中间不允许用户做其他的操作！当然，我会做超时和异常处理。[/quote] 一定要同步的话，只能在websocket对象上着手，看看websocket的api有没有同步/异步的设置。 websocket对象中没有的话。js也无能为力。其实你不允许用户做其他的操作，可以在页面上用一个与页面100%大的透明层或透明图片把页面盖起来，并屏蔽键盘按键。 [/quote] socket通信肯定是异步的，不可能做到同步。你的说法是可以阻止用户操作，很多网页上的进度条也是这个目的。但是我最终的目的是想把“发送命令”和“处理响应”这个过程在JS中封装成一个函数，这样在html中只有像调用普通函数一样就可以得到正确的结果，而不是让Html中提供回调函数或者是事件处理函数。因为命令有上百个、每个命令的响应数据的参数也不相同，所以想把响应数据的解析封装在JS里，html中不涉及业务逻辑，这样减轻前端人员的开发工作。

天际的海浪 2016-03-07

打赏
举报

引用 7 楼 yyfzy 的回复:

[quote=引用 5 楼 jslang 的回复:] 为什么要用阻塞的，长时间阻塞会让浏览器无响应。你用回调函数不好么。

yyfzy 2016-03-07

打赏
举报

国外网站上找到的同样的问题，不知道人家怎么实现的！

yyfzy 2016-03-07

打赏
举报

引用 5 楼 jslang 的回复:

为什么要用阻塞的，长时间阻塞会让浏览器无响应。你用回调函数不好么。

不好，因为我的js和服务器之间的“发送消息-处理响应”是一个原子操作，中间不允许用户做其他的操作！当然，我会做超时和异常处理。

yyfzy 2016-03-07

打赏
举报

用promise只能解决“发送消息”和“处理响应”之间的同步关系，但是不能阻止调用函数直接返回。比如： function fnSend(){ var p = new Promise() ; alert("this is send!") ; p.done() ; return p ; } function fnHandler(){ var p = new Promise() ; alert("this is response handler!") ; p.done() ; return p ; } function test() { fnSend().then(fnHandler); alert("test return!") ; } 输出的结果是： test return! this is send! this is response handler! 而我期望的结果是： this is send! this is response handler! test return!

天际的海浪 2016-03-07