Javascript多个倒计时器,用于通过ajax调用的动态参数的不同时刻

时间:2015-10-15 09:56:17

标签: javascript php jquery ajax timer

我在stackoverflow上搜索了所有内容并谷歌但仍然没有找到任何解决方案,所以我在这里发布它。请帮我解决。

1.正常的电子商务网站,无需刷新页面即可将产品添加到购物车,并且必须单独为每个产品启动倒数计时器(它是一种独特的产品,必须在时间内购买,就像拍卖一样)。

2.当用户点击结账时,必须冻结计时器,如果他再次回到商店,则必须启动计时器并将其冻结。

所以这是我的onclick添加到购物车功能的代码

<input type="button" onClick = "cartAction('add','productId','Timer')" />

在剧本中

function cartAction(action, id, time) {
        var queryString = "";
        if (action != "") {
            switch (action) {
                case "add": 
                    queryString = 'action=' + action + '&id=' + id + '&quantity=1' + '&time=' + time;
                    break;
                case "remove":
                    queryString = 'action=' + action + '&id=' + id;
                    break;
                case "empty":
                    queryString = 'action=' + action;
                    break;
            }
        }
        jQuery.ajax({
            url: "ajax_action.php",
            data: queryString,
            type: "POST",
            success: function (data) {
                $("#cart-item").html(data);
                $("#amount-top").html($("#total").val());
                $("#item-total").html($("#carttotal").val());
                if (action != "") {
                    switch (action) {
                        case "add":                                
                            $("#add_" + id).hide();
                            $("#added_" + id).show();
                            break;
                        case "remove":                                
                            $("#add_" + id).show();
                            $("#added_" + id).hide();
                            break;
                        case "empty":
                            $("#amount-top").html(0);
                            $("#item-total").html(0);
                            break;
                    }
                }
            },
            error: function () {
            }
        });
    }

最后在ajax_action中调用是

here

点击结账时如何冻结计时器以及当用户想要将更多产品添加到购物车时如何释放计时器..

提前致谢。

2 个答案:

答案 0 :(得分:1)

客户端可以与定时器一起显示时钟倒计时。 但是,如果我是你,我不会保存那些计时器,因为每次用户关闭浏览器/打开一个新标签/任何其他停止setTimeout的操作时,每个标记都会同步变得一团糟。

那么如何使用计时器客户端来显示倒计时时钟,但只是添加了一个&#39;添加到商店&#39;每个产品的时间戳和“过期”#39;时间戳也是如此。然后,当用户返回页面时,您不必弄乱同步计时器,只需执行到期 - 当前剩余时间并为时钟客户端设置新计时器,而不是尝试重新同步旧计时器。 / p>

Serverside只是在当前时间小于到期时才将产品添加到购物车。

答案 1 :(得分:1)

您可以启动计时器服务器端。单击“添加到购物车”按钮,向服务器发送ajax请求以启动计时器。服务器将当前时间记录为临时数据库表中的开始时间和结束时间(比如当前时间后10分钟)。 此临时表将存储所有有效的用户计时器。

启动ajax请求将收到结束时间作为响应,以便您知道何时在客户端结束计时器。当用户到达结账页面时,再向服务器发送一个请求以检查服务器端计时器。如果当前时间小于结束时间,服务器将检查临时表。如果是,它将冻结时间设置为临时表中的(当前时间+允许的结账时间),并像之前一样返回冻结时间,否则它将返回超时。 这将使您知道用户是否操作了客户端计时器。此外,关闭浏览器问题也将通过服务器端计时器解决,因为它不受浏览器关闭的影响。

因此,下次当用户访问并且您第一次启动/检查计时器时,您将检查当前时间是否大于冻结时间。如果是,则从结束时间减去冻结时间并检查当前时间是否小于新结束时间然后返回新的结束时间并使用新的结束时间更新临时表。如果当前时间大于新的结束时间,则返回超时并从临时表中删除条目/行。