秒杀需求的实现思路

最新推荐文章于 2024-09-07 18:02:28 发布

kellywong

最新推荐文章于 2024-09-07 18:02:28 发布

阅读量2.2k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/kellywong/article/details/82227005

版权

本文介绍了秒杀系统的实现思路，主要包括预热、抢购和结束三个阶段的逻辑处理。在IMVC架构下，通过控制层获取活动时间并更新状态，组件内部根据状态进行不同展示。预热阶段根据时间差决定是否启动倒计时，抢购阶段同样处理，并在倒计时结束时判断状态转换。文章强调了临界条件的处理，确保系统在状态转换时的准确性。

摘要由CSDN通过智能技术生成

首先大致说一下需求：大概就是要实现下面的效果，秒杀分为三个阶段: 预热中，抢购中，已结束。
预热中的展示效果又分为两种：当距离秒杀开始超过24小时的时候显示秒杀什么时候开始；当距离秒杀开始时间少于24小时的时候，开始倒计时。
抢购中的展示效果也分为两种：当距离秒杀结束超过24小时的时候显示秒杀什么时候结束；当距离秒杀结束时间少于24小时的时候，开始倒计时。
结束就展示已经结束。
这里写图片描述

基于imvc的实现：
1. 首先在control.js中我们通过从后台取得的活动开始时间effectTime，活动结束时间expireTime，以及当前服务器时间serviceDateTime，这三个时间来界定秒杀的状态seckillStatus（三种），当然还需要从接口获取当前产品是不是秒杀产品isSeckillProduct，然后吧=把effectTime，expireTime，seckillStatus，isSeckillProduct的值更新到state中。
2. 然后就是具体组件内部的渲染了，参考PC的SenKill.js组件，因为需要计时以及在24之内和之外的不同展示，这里组件内部state需要设计6个相关变量：

this.state = {
            currentHours: '',
            currentMinutes: '',
            currentSeconds: '',
            countTimer: null,  //计时器
            isShowPreheatTime: false, //控制预热中的两种展示
            isShowPurchaseTime: false, //控制抢购中的两种展示
        }

我们在render()中渲染代码，这里为了模块化，可以把秒杀模块在细化为一个子模块，然后就是根据上面state不同的值进行渲染了
3.所以重点是怎么控制这些状态，注意这里有关计时的，可以写在componentDidMount() 中，简单来说，就是接受父组件传来的秒杀开始，结束，状态信息，然后在预热中的时候，判断秒杀开始时间和当时时间（我觉得这里应该使用服务器时间）间隔，

最低0.47元/天解锁文章