计算用户在网页的停留时间并且发送ajax:
关键代码onbeforeunload是当页面用户刷新页面或者关闭时触发的事件
请引入jquery
还有需要将ajax设置成async: false,
async 设置为 false,则所有的请求均为同步请求,在没有返回值之前,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
demo 代码:
console.log("上次浏览的时间"+localStorage.getItem("temp"));//输出
//计算用户在网页的停留时间并且发送ajax:
// 定义一个变量计算停留时间
var i = 0
function calculation(){
t1 = setInterval(() => {
i++
console.log(i)
}, 1000);
}
calculation()
function sendMsg() {
console.log(i)
localStorage.setItem("temp",i);
//发送ajax
// $.ajax({
// url: "test",
// type: "GET",
// /*这里必须是false*/
// /*这里必须是false*/
// /*这里必须是false*/
// async: false,
// data: {
// "tie_m": i
// }
// });
}
//onbeforeunload是当页面用户刷新页面或者关闭时触发的事件
window.onbeforeunload = function(){
console.log("OK");
//触发事件
sendMsg();
}
//计算用户是否在点击浏览的时间且发送ajax:
监听页面 timeUserFun(0.1);多长时间不点击的时候停止计时器,给body一个点击事件,当点击body开始计算
demo 代码:
*{
padding: 0;
margin: 0;
}
.wrap{
width: 1920px;
height: 1080px;
background: #336699;
}
console.log("上次浏览的时间"+localStorage.getItem("temp"));//输出
var i = 0
var t1 = ''
// 防计时器抖动
var onsha = true
function calculation(){
if(onsha){
onsha = false
t1 = setInterval(() => {
i++
console.log(i)
}, 1000);
}
}
calculation()
document.body.onclick=function(){
calculation()
};
window.onload = function (){
(function($){
funObj = {
timeUserFun:'timeUserFun',
}
$[funObj.timeUserFun] = function(time){
var time = time || 2;
var userTime = time*60;
var objTime = {
init:0,
time:function(){
objTime.init += 1;
if(objTime.init == userTime){
console.log("用户不操作了") // 用户到达未操作事件 做一些处理
setTimeout(() => {
clearInterval(t1)
onsha = true
}, 1000);
}
},
eventFun:function(){
clearInterval(testUser);
objTime.init = 0;
testUser = setInterval(objTime.time,1000);
}
}
var testUser = setInterval(objTime.time,1000);
var body = document.querySelector('html');
body.addEventListener("click",objTime.eventFun);
body.addEventListener("keydown",objTime.eventFun);
body.addEventListener("mousemove",objTime.eventFun);
body.addEventListener("mousewheel",objTime.eventFun);
}
})(window)
// 直接调用 参数代表分钟数,可以有一位小数;
timeUserFun(0.1);
}
function sendMsg() {
console.log(i)
localStorage.setItem("temp",i);
// $.ajax({
// url: "test",
// type: "GET",
// /*这里必须是false*/
// /*这里必须是false*/
// /*这里必须是false*/
// async: false,
// data: {
// "name": "value"
// }
// });
}
/**
* onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发。该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。
* @return
*/
window.onbeforeunload = function(){
console.log("OK");
sendMsg();
}
参靠:https://blog.csdn.net/qq_41049816/article/details/90794454
ps:纯属个人思路,如果不准确或有弊病(非常欢迎指点),可能用生命周期或者cookie和后端配合更好。