搬砖指北 —— 数据劫持结合超时状态监听最近都在盖楼（搬砖）其中有个设计：前端广播时间点数据到Server并同步到其他w

前言（需求&设计&废话）

在HTML中实现异步状态监听 干掉状态循环监听

~~图是不规范的，主要是实现思路意思意思~~

最近都在盖楼（搬砖）其中有个设计：前端广播时间点数据到Server并同步到其他web服务及C/S系统上，根据时间点做同步显示。

数据广播后不同服务后A服务需要尽量保证：

一致：为什么尽量保证一致性？最常见的场景案例：视频场景产生视频字幕不同步。
容错: 其他服务可能通讯失败等情况，需要设置最长等待时间保证服务可用，

举个例子你总不能因为弹幕加载失败，视频不看了吧（如果能你看我这刀够长吗？）。

中篇

数据广播出去同时也要尽量保证各服务计算的数据是同一时间点（不能一播了之），前端在保证一致其实就是状态改变等待所有服务响应成功：
- 阻塞
  
  实现：可以
  
  带来的问题：单线程浏览器卡顿广播事件不能实时暂停虽可以实现但是效果巨差
```
while(true){
	if(state){}
  	//同步sleep
}
```
- 非阻塞式(Promise)
  
  实现：不可以
  
  服务中调用不能暂停执行，不能正确阻塞服务执行实际效果不行
```
function sleep(ms) {
        return new Promise(resolve =>
            setTimeout(resolve, ms)
        )
    }
```
- 非阻塞式ES 6(Proxy)
  
  实现：可以
  
  广播后就是等待的是所有服务返回SUCCESS
  
  实际原理就是使用Proxy通过set key时监听value状态改变判断服务是否准备就绪
```
let proxy = new Proxy({}, {
    get: function (target, key, receiver) {
        return Reflect.get(target, key, receiver);
    },
    set: function (target, key, value, receiver) {
        return Reflect.set(target, key, value, receiver);
    }
});
```
- 非阻塞式ES 5(Object.defineProperty)
  
  实现：可以
  
  同ES6 兼容
```
...
```
补偿机制

~~追不上的妹子就别追了~~ 等不到状态就不等了

设定一个合理等待时间后释放状态保证可用服务继续执行

~~可以在这里设置规则设置指定服务无状态回执后剔除服务~~
```
let timeOutFun = window.setTimeout(function(){
    timeOutConfig(proxy)
},500)
```

总结

没有总结。

参考：

ES6系列之Proxy

ES5 Object.defineProperty（数据劫持）

promise、async、await、settimeout异步原理与执行顺序