js与session配合的定时器实现刷新继续保持定时器运行

为确保安全一些时间阈值定义在后台，自行实现即可。

一，Html部分

<html>
<head>
    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
</head>
<body>
<input type="button" value="点击倒计时" id="send"/>
</body>

</html>

<script>
    var i = 30;
    $(function () {
        $.ajax({
            type : "post",
            url : "Index/My/send_time",
            data : {'second' : i},
            success : function (data) {
                console.log(data);
                if (data > 0) {
                    interval(data);
                }
            }
        })
    });

    $('#send').click(function () {
        $.ajax({
            type : "post",
            url : "Index/My/record_time",
            data : {'second' : i, 'click_time' : parseInt(new Date().getTime()/1000)},
            success : function (data) {
                if (data != 0) {
                    interval(i);
                }
                console.log(data);
            }
        })
    });

    // 显示提示文字，禁用提交按钮
    function setTime($t) {
        $button = $("#send");

        $message = $("<span id='message'> <span id='wait'>"+ $t +"</span>秒后可重新发送验证码...</span>");
        $message.insertAfter($button);
        $button.attr("disabled", true);
    }

    function interval($t) {
        setTime($t);
        var wait = document.getElementById('wait');
        var interval = setInterval(function(){
            var time = --wait.innerHTML;
            if(time <= 0) {
                clearInterval(interval);
                $button.attr("disabled", false);
                $message.remove();
            };
        }, 1000);
    }
</script>

二，后端部分：

class My extends Controller
{

    public function send_time()
    {
        session_start();
        $time = input('second');
        $time_diff = time() - (isset($_SESSION['click_time']) ? $_SESSION['click_time'] : time());

        if (isset($_SESSION['click_time']) && $time_diff < 30) {
            $diff = $time  - $time_diff;
            echo $diff;
        } else {
            unset($_SESSION['click_time']);
        }
    }

    public function record_time()
    {
        session_start();
        $second = input('second'); //30
        $click_time = input('click_time'); //本次点击时间
        if (isset($_SESSION['click_time']) && $click_time - $_SESSION['click_time'] < $second) {
            echo 0;
        } else {
            $_SESSION['click_time'] = $click_time;
            echo date('Y-m-d H:i:s', $click_time);
        }
    }
}

js与session配合的定时器实现刷新继续保持定时器运行

猜你喜欢