前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >从零开始学习3D可视化之事件卸载、事件暂停

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

原创
作者头像
thingjs
修改2021-07-02 14:24:04
3690
修改2021-07-02 14:24:04
举报

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

卸载事件

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

代码语言:javascript
复制
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。

代码语言:javascript
复制
app.on("click",".Building",function(event) {
 console.log("you click!");
},"tag1");
 
// 暂停
app.pauseEvent("click", ".Building", "tag1");
 
// 恢复
app.resumeEvent("click", ".Building", "tag1");

自定义事件

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

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

代码语言:javascript
复制
class AlamrManager {
 constructor() {
 ......
 }
 
 enable() {
 ......
 app.trigger("AlarmEnable")
 ......
 }
 
 setObjAlarm(obj, alarmLevel) {
 ......
 obj.trigger("alarm", {"level":alarmLevel} )
 ......
 }
}

外部注册如下:

代码语言:javascript
复制
app.on("AlarmEnable", function(ev){
 ......
})
 
app.query(".Thing").on("alarm",function(ev){
 if(ev.level == "critical"){
 ......
 }
 ......
})

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

数字孪生可视化:https://www.thingjs.com/

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 卸载事件
    • 暂停和恢复事件
      • 自定义事件
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档