「看看JS如何实现生产者-消费者模式 | 创作者训练营第二期」-一一网

JS中的生产者和消费者模式是什么样的？

生产者和消费者模式是一个经典的多线程设计模式，生产者和消费者在同一时间段内共用同一个存储空间，生产者往存储空间中添加产品，消费者从存储空间中取走产品，当存储空间为空时，消费者阻塞，当存储空间满时，生产者阻塞。

举一个简单的例子，小白也能一看就懂

现在有两个进程分别为A和B，还有一个存放数据仓库，进程A负责把数据带进仓库了，而进程B则把仓库里的数据带出来使用，这就是经典的生产者和消费者模式了，A是生产者（带入数据），B是消费者（带出数据）。

生产者和消费者的他们有什么特点？

生产者它不会在缓冲区满的时候继续向缓冲区放入数据，而消费者也不会在空的缓冲区中消耗数据
当缓冲区满的时候，生产者会进入休眠状态，当消费者开始消耗缓冲区的数据时，生产者才会被唤醒进行数据添加到缓冲区
当缓冲区空时，消费者也会进入休眠状态，生产者往缓冲区添加数据时才会被唤醒

怎么实现生产者和消费者？

1.先创建一个缓冲区（数组）并设置缓冲区的最大容量

let store = new Array();
let maxContain: number = 10;
复制代码

2.设定一个锁，用于控制生产者和消费者状态

let lock: boolean = false;
复制代码

3.定义生产者方法

let producer = setInterval(() => {
    if (!lock) {
        if (store.length < maxContain) {
            store.push('product');
            $('.sl').text(store.length);
            $('.c').text('工作中');
        } else {
            lock = true;
            $('.p').text('休眠');
            $('.note').append('<span>仓库已满，停止生产</span><br>');
        }
    }
}, 100);
复制代码

4.定义消费者方法

let consumer = setInterval(() => {
    if (store.length > 0) {
        store.shift();
        $('.sl').text(store.length);
        $('.p').text('工作中');

    } else {
        lock = false;
        $('.c').text('休眠');
        $('.note').append('<span>仓库已空，停止消费</span><br>');
    }
}, 500);
复制代码