js怎么实现防刷新的多个倒计时动态显示，要求见下

My f 2019-02-23 04:03:42

我先说下我的需求与思路吧。
需求：现有多个菜品订单，需要给每个订单建立一个倒计时用来制作菜品，倒计时结束制作完成改变订单状态。
思路：首先选择某条数据，点击开始倒计时。通过获取他的ID，把他的ID和倒计时存进浏览器的localStorage中，ID作为Key，倒计时作为Value。让数据与倒计时关联起来达到根据ID查询倒计时的效果。
防刷新与倒计时的效果我已经完成了，不过在显示上还有一些缺陷，应为我这里是选择数据点击按钮弹出窗体，窗体用来显示倒计时，然而因为所有倒计时的显示窗体都是公共的，所以有时候会在窗体上多个倒计时来回跳动，而且如果只有一条倒计时那么计时结束会做出结束时写的操作，如果是多条倒计时则会重新开始倒计时，如此循环多次才会计时结束并做出的操作。
请看代码：
下面这些代码的作用：页面加载判断有无倒计时，有就执行倒计时。防刷新的作用



var storage = window.localStorage;   //浏览器的localStorage

$(function () {

    var ID;

    for (i = 0; i < storage.length; i++) {

        if (storage.key(i)) {

            ID = storage.key(i);

            ks(ID);

        }

    }

});

function ks(ID) {

    if (ID == "" || ID == undefined) { } else {

        var BeginTime = setInterval(function () { Timer(ID, BeginTime) }, 1000);

    }

}

下面这些代码的作用：选择一条为已确认的数据点击弹出开始倒计时的窗体，弹出窗体前判断该数据有无倒计时，有就显示倒计时，没有就显示开始倒计时的按钮。



function CLOrder(rowIndex) {

    var status = tbOrder.getRecord(rowIndex).StatusName;

    var OrderID = tbOrder.getRecord(rowIndex).OrderID;

    if (status == "已确认") {

        $("#Order1").val(OrderID);

        if (!storage.getItem(OrderID)) {

            $("#Begin").html("确认制作");

            $("#Begin").attr("disabled", false);

            $("#EndTime").addClass("hidden");

        } else {

            $("#Begin").html("制作中");

            $("#Begin").attr("disabled", true);

            $("#EndTime").removeClass("hidden");

            var fun = setInterval(function () {

                var tt = storage.getItem(OrderID);

                if (parseInt(tt) > 0) {

                    minute = Math.floor(tt / 60);

                    second = Math.floor(tt) - (minute * 60);

                    minute = minute < 10 ? "0" + minute : minute;

                    second = second < 10 ? "0" + second : second;

                    $("#EndTime").html('还剩' + minute + '分' + second + '秒制作完成!');    

                    storage.setItem(OrderID, tt);

                } else {

                    layer.msg("制作完成!");

                    clearInterval(fun);

                    storage.removeItem(OrderID);

                }

            }, 1000);

        }

    }

}

下面这些代码的作用：Make()是点击开始倒计时的方法，Timer()是判断有无倒计时并计算倒计时的方法，计时结束做出操作



function Make() {

    var ID = $("#Order1").val();

    var KuCun = $("#WareCount").html();

    var SuoXu = $("#CollocateCount").html();

    if (parseInt(KuCun) >= parseInt(SuoXu)) {

        var BeginTime = setInterval(function () { Timer(ID, BeginTime) }, 1000);//setInterval方法调用自减方法实现倒计时

        if (BeginTime) {//判断倒计时是否存在，存在就改变HTML的内容

            $("#Begin").html("制作中");

            $("#Begin").attr("disabled", true);

            $("#EndTime").removeClass("hidden");

        }

    } else {

        layer.alert("库存不足，无法制作", { icon: 0, title: '提示' });

    }

}

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("数据异常!");

            }

        });

    }

}