您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

兼容火狐退回事件以及防抖的一些操作(前端)

在页面关闭退回事件中,大家一般想到的是onunload事件,但这个事件很鸡肋,火狐浏览器是不支持的,那么该用什么好了?如果心细一点,则会看到一个叫做window.history接口。

这个接口可以获得浏览器历史浏览记录,并且可以通过go()或者back()或者forward()进行页面跳转,其中还提供两个重要操作方法即replaceState以及pushState对当前浏览记录堆栈进行

操作与修改。当然具备这一点,还不足以在退出页面时进行事件处理。我们还需要用到window.onpopstate事件进行监听。具体如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type = "button" id = "test" value="防抖" />
<script>
//hack实现在火狐浏览器中后退监听效果
var curUrl = window.location;
window.history.pushState({'test':1},"test1",curUrl);
window.onpopstate = function(e){
    alert("后退");
}

</script>
</body>
</html>

关于防抖,防抖主要用于在前端拦截住一定用户恶意操作,从而防止过多重复内容上传到后端,增加后端处理负担而设计的。关于防抖主要利用到函数闭包以及setTimeout和clearTimeout这三部分,当用户过快点击时也只算调用一次callback事件处理器,不仅可以高效实现数据统计,而且能在一定程度上减轻后端的负担,具体如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type = "button" id = "test" value="防抖" />
<script>
			
var btnObj = document.getElementById("test");
btnObj.addEventListener('click', bounce(1000,function(){
    console.log("11111100");
}));
			
function bounce(time,callback){
    let first = true;
    let timeId = null;
				
    return function(e){
        if(first){
	    if(!timeId){
	        first = false;
	        clearTimeout(timeId);
	        timeId = setTimeout(function(){
		    callback();
		    first = true;
		    timeId = null;
	        },time);
	    }
        }else{
	    first = true;
	    clearTimeout(timeId);
	    timeId = null;
	}
    }
				
}
</script>
</body>
</html>

 


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进