简要
通过缓存，去中心化，降低耦合度，在这个模型中，最关键就是内存缓冲区为空的时候消费者必须等待，而内存缓冲区满的时候，生产者必须等待，从而达到动态平衡，该实例主要是关注实现这一点

体验网址
http://www.oujin.fun/#/ProPage
ps:该网页是移动版适配，如有不适。请自行F12切换到移动版
效果图

实现思路
1

/*定义全局数组当做缓存仓库*/
var factoryCapacity=new Array();

2定义两个计时函数，分别实现生产操作，和消费操作

  console.log("prorate=="+prorate+","+"conrate=="+conrate)
        /*定义一个定时函数，如果仓库未满，按照生产速率往仓库塞值*/
        this.proTimer = setInterval(
            () => this.add()
            ,prorate)
        /*定义一个定时函数，如果仓库未空，按照生产速率往仓库取值*/
        this.conTimer = setInterval(
            () => this.remove()
            ,conrate)

3，控制工厂容量保护

add(){
        if(factoryCapacity.length<this.state.factory){
            factoryCapacity.push("1");
            this.setState({
                fac: "容量为"+factoryCapacity.length,
                pro:"生产中"
            });
        }else {
            this.setState({
                fac: "工厂已满",
                pro:"暂停生产"
            });

        }
    }
    remove(){
        if(factoryCapacity.length>0){
            factoryCapacity.shift ()
            this.setState({
                fac: "容量为"+factoryCapacity.length,
                con:"消费中"
            });
        /* console.log("r工厂容量为"+factoryCapacity.length)*/
        }else {
            this.setState({
                fac: "工厂已空",
                con:"停止消费"
            });

        }
    }

具体思路很简单，但还是有很多很多的小细节需要注意
代码地址
https://github.com/oujin-nb/sysPage