onunload +JS定时器 + ajax 实现
每秒写一次数据库肯定是不行的资源释放都来不及，使用js计时器，在离开页面时，调用ajax异步插入数据库，即不延迟跳转，也不会占用资源，插入完就释放了
HTML onunload 事件属性
定义和用法
onunload 属性会在页面下载时触发（或者浏览器窗口已关闭）。
onunload 在用户从页面导航离开时发生（通过点击链接、提交表单或者关闭浏览器窗口等等）。
注释：如果您重载页面，也会触发 unload 事件（以及 onload 事件）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>记录当前页面存在时间</title>
</head>
<body onbeforeunload="test()">
<header class="aui-bar aui-bar-nav back-green5 header-ding" id="aui-header" style="top:43px;">
<div class="aui-title"></div>
<!-- onunload 属性会在页面下载时触发（或者浏览器窗口已关闭）。
onunload 在用户从页面导航离开时发生（通过点击链接、提交表单或者关闭浏览器窗口等等）。 -->
</header>
<form action="{:U('Index/index_post')}" method="post" class="form-horizontal js-ajax-form main-ul-box" enctype="multipart/form-data" style="margin-top:90px;">
<input type="text" name="timer" id="timer"/>
<div class="tuichu-box">
<input class="weui-btn login-btn" id="button" value="提交" type="submit">
</div>
</form>
</body>
<script src="/Public/wechat/js/zepto.min.js"></script>
<script>
var ele_timer = document.getElementById("timer");
var n_sec = 0; //秒
var n_min = 0; //分
var n_hour = 0; //时
//60秒 === 1分
//60分 === 1小时
function timer() {
return setInterval(function () {
var str_sec = n_sec;
var str_min = n_min;
var str_hour = n_hour;
if ( n_sec < 10) {
str_sec = "0" + n_sec;
}
if ( n_min < 10 ) {
str_min = "0" + n_min;
}
if ( n_hour < 10 ) {
str_hour = "0" + n_hour;
}
var time = str_hour + "," + str_min + "," + str_sec;
ele_timer.value = time;
n_sec++;
if (n_sec > 59){
n_sec = 0;
n_min++;
}
if (n_min > 59) {
n_sec = 0;
n_hour++;
}
}, 1000);
}
var n_timer = timer();
function test(){
var ele_timer = $("#timer").val();
$.ajax({
url: "{:U('Index/index2')}",
type: "post",
data: {
ele_timer:ele_timer,
},
dataType: "json",
success: function(data) {}
});
}
</script>
</html>
后台代码：
public function index(){
dump(session('ele_timer'));
$this->display();
}
public function index2(){
$ele_timer = I('ele_timer');
session('ele_timer',$ele_timer);
return true;
}
public function index_post(){
dump(I(''));
dump(session('ele_timer'));
die;
}
网友评论