mraid页面事件监听避免这样写
事件 页面 监听 避免 这样
2023-06-13 09:16:41 时间
在工作中,用到了 mraid.js 库,其中封装了事件监听逻辑,代码如下:
var EventListeners = function (event) {
this.event = event;
this.count = 0;
var listeners = {};
this.add = function (func) {
var id = String(func);
if (!listeners[id]) {
listeners[id] = func;
this.count++
}
};
this.remove = function (func) {
var id = String(func);
if (listeners[id]) {
listeners[id] = null;
delete listeners[id];
this.count--;
return true
} else {
return false
}
};
this.removeAll = function () {
for (var id in listeners) {
if (listeners.hasOwnProperty(id)) {
this.remove(listeners[id])
}
}
};
this.broadcast = function (args) {
for (var id in listeners) {
if (listeners.hasOwnProperty(id)) {
listeners[id].apply(mraid, args)
}
}
};
this.toString = function () {
var out = [event, ":"];
for (var id in listeners) {
if (listeners.hasOwnProperty(id)) {
out.push("|", id, "|")
}
}
return out.join("")
}
};
其中事件监听回调增加逻辑,是根据回调函数转为 String 之后来存储和判断的,当我们这样写
// mraid 监听页面是否展示
function onSdkReady(fn) {
if (mraid.isViewable()) {
fn && fn();
} else {
mraid.addEventListener('viewableChange', function videoViewableChange(viewable) {
if (viewable) {
mraid.removeEventListener('viewableChange', videoViewableChange);
fn && fn();
}
});
}
}
// mraid show 判断,执行对应方法
function mraidShow(fn) {
"use strict";
if (typeof mraid !== 'undefined') {
if (mraid.getState() === 'loading') {
mraid.addEventListener('ready', function(){
fn && onSdkReady(fn);
});
} else {
fn && onSdkReady(fn);
}
} else {
fn && fn();
}
}
原本我们想要封装下 mraid viewableChange 事件监听的逻辑,执行不同的回调函数,但是实际我们使用了同一个回调函数,通过在同一份回调函数中传参不同的方法来实现,结果只能第一次事件监听生效,后续监听的方法无法生效。
开发中类似逻辑要格外注意,修改后如下:
function onSdkReady(fn) {
if (mraid.isViewable()) {
fn && fn();
} else {
typeof fn === 'function' && mraid.addEventListener('viewableChange', fn);
}
}
这样需要在实际传入回调函数的时候 接受 viewable 参数,来做判断。
相关文章
- 【技术白皮书】第三章 - 3: 事件信息抽取的方法
- JS解绑事件
- js添加事件和移除事件:addEventListener()与removeEventListener()
- 超精简的订阅发布事件组件--SPEvent
- html复选框选中与未选中触发事件的方法
- [javaSE] GUI(Action事件)详解编程语言
- Oracle 等待事件 broadcast mesg queue transition 官方解释,作用,如何使用及优化方法
- Oracle 等待事件 Enqueues:UN,UserName 官方解释,作用,如何使用及优化方法
- JS onerror事件:错误处理
- JS scroll事件:页面滚动
- 2019 年最可怕的黑客事件与安全漏洞(下)
- 深入了解MySQL事件状态:优化数据库任务和增强性能(mysql事件状态)
- Javascript函数加壳多用于事件绑定
- ASP.NET页面中动态增加的控件、添加事件
- 用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
- 用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
- jQuery事件绑定.on()简要概述及应用
- javaScript页面自动加载事件详解
- ASP.NET页面按钮单击事件失效的解决方法
- jQuery回车事件enter使用示例
- iframe里的页面禁止右键事件的方法
- Ajax局部更新导致JS事件重复触发问题的解决方法
- 关闭页面window.location事件未执行的原因及解决方法