从零开始学习 3D 可视化之事件卸载、事件暂停

关注

发布于: 1 小时前

事件就是用户或浏览器自身执行的某种动作，而响应某个事件的函数就叫做事件处理程序 (或事件侦听器)。事件处理程序的名字以 "on" 开头，比如 click 事件的事件处理程序就是 onclick。下面我将继续学习数字孪生可视化场景中如何卸载事件、暂停和恢复事件、自定义事件。

卸载事件

如果内存中保留大量无用的事件处理程序，会影响性能。所以一定要在不需要的时候及时移除事件处理程序。需要卸载一个事件的时候使用 off() 方法。这样就把所有的数字孪生可视化 building 下的 click 事件都清除了。假设这个数字孪生可视化物体有多个 marker，找到其中一个卸载掉事件，不影响其他 marker 和后创建的 marker。

app.on("click", function(event) { console.log("you click!");}); // 卸载app.off("click"); app.on("click", ".Building", function(event) { console.log("you click!");}); // 卸载app.off("click", ".Building"); app.on("click",".Building",function(event) { console.log("you click 1 !");},"tag1"); // 卸载app.off("click", ".Building", "tag1");

复制代码

注意事项：

若绑定数字孪生可视化事件时，添加了条件，则 off 第二个参数必须传条件，如果没有条件，又需要传 tag ，需要将条件传 null。

暂停和恢复事件

如果 off 掉一个事件，要想恢复，有时候比较难，就会找不到之前的回调方法了。面对这种情况，提供 pauseEvent 方法，用于暂停事件，它的控制方法和标准类似于 off。

app.on("click",".Building",function(event) { console.log("you click!");},"tag1"); // 暂停app.pauseEvent("click", ".Building", "tag1"); // 恢复app.resumeEvent("click", ".Building", "tag1");

复制代码

自定义事件

ThingJS 内置了很多事件，但如果自己写模块的时候，也需要触发事件，该如何操作？外部注册还是使用 on，在需要触发的地方可以使用 trigger 接口来对外触发事件。

比如在写一个数字孪生可视化报警管理器：

class AlamrManager { constructor() { ...... }  enable() { ...... app.trigger("AlarmEnable") ...... }  setObjAlarm(obj, alarmLevel) { ...... obj.trigger("alarm", {"level":alarmLevel} ) ...... }}

复制代码

外部注册如下：

app.on("AlarmEnable", function(ev){ ......}) app.query(".Thing").on("alarm",function(ev){ if(ev.level == "critical"){ ...... } ......})

复制代码

—————————————————

数字孪生可视化：thingjs.com/

发布于: 1 小时前阅读数: 3

原文链接:【http://xie.infoq.cn/article/d316680017e281b38a3bac66f】。文章转载请联系作者。

森友小锘

关注

还未添加个人签名 2021.04.28 加入

还未添加个人简介

发布

暂无评论

创作场景

从零开始学习 3D 可视化之事件卸载、事件暂停

卸载事件

暂停和恢复事件

自定义事件

森友小锘

评论