在之前的教程中我们可以知道,基本的触发器,基于如下三个要素完成设置,方可实现在特定的触发条件下、进行预期的触发动作:
1.触发元素(Element):即针对什么对象进行操作
2.触发条件(Event):即在什么情况下触发,包括点击触发、手势触发等。
3.触发动作(Action):触发什么效果,比如 隐藏一个图片、或者 执行一个动画
例如:对一个翻页提示(Element)进行点击操作(Event)后,执行跳转到下一页(Action)。
但很多情况下,我们需要在同一个触发元素的同一个触发条件下,去执行多个触发动作(同级触发器),如点击一个按钮A,既希望它可以触发暂停计时器A、又可以显示热区B,还可以触发数据库操作C,最后可以设置参数值D和E,那么如何界定这几个触发动作之间的先后顺序呢?
首先我们要理清几个概念:
同级触发器:
指在同一元素的同一触发条件之下的所有触发器。
触发器的执行顺序以及执行结果返回顺序:
通常而言,同级触发器按顺序自上而下执行,但不一定按顺序返回结果。
如下图所示,页面触发器-切换到当前页时,执行两个动作:播放SVG描绘动画以及跳转下一页。SVG描绘动画会在跳转下一页之前先开始播放,但不会等30s动画播放完成后才去跳转下一页。
如需确保按顺序返回执行结果,则需要使用触发器的【成功时】回调结果,例如:我们希望在观赏完H5的动画之后再自动跳转下一页,则不能将【播放动画】和【跳转页面】放在同级触发器上,而是将【跳转页面】放在【播放动画】的动画结束时触发器上。如下图所示:
上文中提到的【成功时】回调功能,除了【动画结束时】的触发器以外,还包括【截屏成功时】、【微信拍照成功时】、【微信录音成功时】、【表单提交成功时】、【数据库操作成功时】等等。
这些【成功时】触发器的意义就是确保上一步(动画流程、图片/录音上传、表单提交等)完成,再执行下一步操作,避免因结果回调顺序错误带来的H5流程出错。
当同级触发器中存在多个【设置参数值】时,位于上方的先执行,位于下方的后执行。
其他建议:
触发动作——跳转页面,往往放在其他触发动作之下,以确保当前页面的所有其他动作都已执行完毕,再跳转页面。避免先跳转页面后其他当前页面的触发动作没有来得及执行。
上一篇 触发器——弹出消息提示框/弹窗/警示窗/文字弹窗正式上线