.

10.触发器执行顺序

老赵发表于:2021年11月03日 16:41:44更新于:2021年11月03日 17:51:00

在之前的教程中我们可以知道,基本的触发器,基于如下三个要素完成设置,方可实现在特定的触发条件下、进行预期的触发动作:

1.触发元素(Element):即针对什么对象进行操作

2.触发条件(Event):即在什么情况下触发,包括点击触发、手势触发等。

3.触发动作(Action):触发什么效果,比如 隐藏一个图片、或者 执行一个动画

例如:对一个翻页提示(Element)进行点击操作(Event)后,执行跳转到下一页(Action)。

但很多情况下,我们需要在同一个触发元素的同一个触发条件下,去执行多个触发动作(同级触发器),如点击一个按钮A,既希望它可以触发暂停计时器A、又可以显示热区B,还可以触发数据库操作C,最后可以设置参数值D和E,那么如何界定这几个触发动作之间的先后顺序呢?

image.png

首先我们要理清几个概念:

同级触发器:

指在同一元素的同一触发条件之下的所有触发器。

image.png

触发器的执行顺序以及执行结果返回顺序:

通常而言,同级触发器按顺序自上而下执行,但不一定按顺序返回结果。

如下图所示,页面触发器-切换到当前页时,执行两个动作:播放SVG描绘动画以及跳转下一页。SVG描绘动画会在跳转下一页之前先开始播放,但不会等30s动画播放完成后才去跳转下一页

image.png

如需确保按顺序返回执行结果,则需要使用触发器的【成功时】回调结果,例如:我们希望在观赏完H5的动画之后再自动跳转下一页,则不能将【播放动画】和【跳转页面】放在同级触发器上,而是将【跳转页面】放在【播放动画】的动画结束时触发器上。如下图所示:

image.png

上文中提到的【成功时】回调功能,除了【动画结束时】的触发器以外,还包括【截屏成功时】、【微信拍照成功时】、【微信录音成功时】、【表单提交成功时】、【数据库操作成功时】等等。

这些【成功时】触发器的意义就是确保上一步(动画流程、图片/录音上传、表单提交等)完成,再执行下一步操作,避免因结果回调顺序错误带来的H5流程出错。

image.png

当同级触发器中存在多个【设置参数值】时,位于上方的先执行,位于下方的后执行。

image.png

其他建议:

触发动作——跳转页面,往往放在其他触发动作之下,以确保当前页面的所有其他动作都已执行完毕,再跳转页面。避免先跳转页面后其他当前页面的触发动作没有来得及执行。




--------- 不了解设计的程序员不是好客服 ---------------