js实现防止刷新的多条倒计时同时进行

开发工具与关键技术：Visual Studio 2015 与 js
作者：范子超撰写时间：2019年1月20日

我这里是调用了localStorage属性来将倒计时数储存进浏览器，在根据其他方法来实现防刷新的倒计时效果。
写的比较仓促，详细解释代码都有注释。
在这里插入图片描述
首先我们来看一下HTML代码的内容

<div class="modal-body" id="Part" style="display:none;">
        <div class="modal-header" style="font-size:20px;">
            <input class="hidden" id="Order1" />@*这个input用来装标识倒计时的ID*@
            <div class="col-md-12 col-sm-12" id="Numbers">
                <label class="col-md-2 col-sm-2 text-center">订单号:</label>
                <div class="col-md-1 col-sm-1"></div>
            </div>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-md-12 col-sm-12" style="font-size:17px;" id="Par"></div>
                <div class="col-md-12 col-sm-12 pull-right" style="font-size:17px;margin-top:30px;">
                    <div class="col-md-12 col-sm-12 text-center">
                        <button id="Begin" class="btn btn-primary" type="button" "Make()">确认制作</button><br /><br />@*点击开始倒计时的btn*@
                        <span class="hidden" id="EndTime"></span>@*这个用来显示倒计时*@
                    </div>
                </div>
            </div>
        </div>
    </div>

var BeginTime = setInterval(function () { Timer(ID, BeginTime) }, 1000)
上面加粗的方法所传的两个参数分别是所要生成倒计时的ID，和计时器对象。
因为我是根据ID来查询倒计时，所以要用传个ID来关联倒计时。
下面是点击开始倒计时的方法。

function Make() {
            var BeginTime = setInterval(function () { Timer(ID, BeginTime) }, 1000);//setInterval方法调用自减方法实现倒计时
            if (BeginTime) {//判断倒计时是否存在，存在就改变HTML的内容
                $("#Begin").html("制作中");
                $("#Begin").attr("disabled", true);
                $("#EndTime").removeClass("hidden");
            }
        }

下面是判断有无倒计时，有就把剩下的时间赋值给Time继续进行倒计，没有就给它添加一个30秒的倒计时，并且计算完后改变HTML来实现实时倒计的效果，并且倒计时结束清除setInterval。

function Timer(ID, BeginTime) { //ID是要生成倒计时的那条数据的ID，BeginTime是计时器对象。
            var Time = 0, minute = 0, second = 0; //时间默认值
            if (storage.getItem(ID)) { //判断有无倒计时，有就把倒计时剩余的时间赋值给Time，没有就赋值30秒倒计时
                Time = storage.getItem(ID);
            } else {
                Time = 30;
            }
            if (Time > 0) {//判断是否倒计时结束，未结束就进行计算并自减在改变HTML来实现倒计时效果
                minute = Math.floor(Time / 60);
                second = Math.floor(Time) - (minute * 60);
                minute = minute < 10 ? "0" + minute : minute;
                second = second < 10 ? "0" + second : second;
                Time--;
                storage.setItem(ID, Time);//把自减后的时间赋值Time
                var dd = $("#Order1").val();
                if (dd == ID) {
                    $("#EndTime").html('还剩' + minute + '分' + second + '秒制作完成!');
                }
            } else {//倒计时结束清除倒计时并改变数据状态
                layer.close(Part);//关闭layer窗体
                storage.removeItem(ID);//移除浏览器中用来存储倒计时对象。
                clearInterval(BeginTime);//清除倒计时
                $.post("Maked?ID=" + ID, function (data) {//改变状态
                    if (data = "制作完成!") {
                        layer.msg(data);
                        tbOrder.refreshPage();
                    } else {
                        layer.msg("数据异常!");
                    }
                });
            }
        };

下面这段代码就是实现防刷新的，注意他变量的范围，不要写错了。
主要思路：因为刷新页面会把setInterval方法刷掉，而setInterval没了倒计时就失效暂停了，所以要把浏览器中存在的倒计时查找出来再次调用setInterval方法来进行倒计时。

$(function () {//页面加载事件
     var ID;
     for (i = 0; i < storage.length; i++) {循环倒计时
         if (storage.key(i)) {
             ID = storage.key(i);//把倒计时的Key值也就是进行倒计时的那条数据的ID赋值给变量
             ks(ID);//调用倒计时方法
         }
     }
 });
function ks(ID) {
     if (ID == "" || ID == undefined) { } else {把有倒计时计时器对象调用 setInterval 开始倒计
         var BeginTime = setInterval(function () { Timer(ID, BeginTime) }, 1000);
     }
 }

总结：在写这个功能的时候，因为我这里倒计时的显示窗体，还有调用倒计时的方法都是公共的，所以在这个过程中遇到了许多bug，有时候我真的有种想放弃的想法，但是我还是努力坚持过来了，虽然这个功能还有些许瑕疵，但我为我能坚持到这个程度感到高兴。我会继续努力的。

js实现防止刷新的多条倒计时同时进行

猜你喜欢