关于window.addEventListener的小坑

关于window.addEventListener的小坑

场景

子窗口向父窗口传值,比如点击按钮弹窗打开iframe ,这时候可以使用,防止跨域。我的问题比较简单,就是监听没有删除,导致多次执行

代码

演示代码,不分父子窗口,直接写一个页面内,仅供参考

父窗口,监听数据

window.addEventListener("message", function(e){
	console.log(e.data.msg)
})

子窗口,发送数据

window.postMessage({msg:"Hello World"}, '*');

这个时候,由于我的监听,是放在按钮事件内,所以每点一次就会addEventListener一次,多次点击,就会多次执行,如果里面也有业务逻辑的话,比如发送请求,就会执行多次,所以是BUG。

解决

方案1:在打印后,清除监听。比较恶心的事情发生了(自己体会),结论是:removeEventListener的回调函数和addEventListener的回调函数,必须是同一个。
说人话:必须把函数单独提取出来,然后让他俩调用同一个,如下:

// 监听
window.addEventListener("message", say)

// 提取函数
function say(e){
	console.log(e.data.msg)
	// 移出监听
	window.removeEventListener('message', say);
}

方法二:类似防抖节流的思想,每次点击将函数监听函数进行替换,只执行点击的最后一次,我觉得还是这种方式最简单

window.onmessage = function say(e){
	console.log(e.data.msg)
}
转载请说明出处内容投诉
CSS教程_站长资源网 » 关于window.addEventListener的小坑

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买