当前位置: 首页 > 网络应用技术

Vue使用$一次取消SettieMout和SetInterval

时间:2023-03-05 17:17:00 网络应用技术

  在开发软件的过程中,此要求通常会生成:

  在上述情况下没有共同点,但是有必要使用间隔呼叫或延迟调用来实现。这两个API通常用于制作Ajax短连接数据轮或JavaScript动画。在它们的情况下,间隔呼叫被延迟调用。

  一旦开始运行,他们将继续致电直到页面关闭。但是有时我们需要在路由跳跃时停止打电话,否则很容易引起问题。

  手动电话,可以满足需求

  在以前的本地JS中,我们通常会写下:

  如果您在Vue中使用它怎么办?

  例如,有一个logs.vue用于显示正在执行的日志:

  该代码似乎没有任何问题,但是在测试时,会发现有时该路线已经跳了起来,并且过程日志的接口仍在不断调用。即使,有时接口呼叫速度也非常快。有可能的请求。

  BeForeDestory是销毁组件之前生命周期的钩子。必须调用此挂钩功能,但是它可以完全破坏SettieMout吗?答案不是。

  打开控制台后,您可以看到连续打印的ID

  这是因为ClearTimeOut是删除特定的Settimeout。每次都调用ClearTimeOut以删除上次的ID,而不是settimeout.of的返回值。

  然后,对于这种边界情况,VUE提供了一个程序化事件侦听器来处理它。

  根据文档,我们的代码可以像这样更改

  这样的写作,解决了两个潜在的问题

  如果您在项目中引入TS,则可能导致计时器在组件被破坏时成功清除。目前,您需要使用它

  如果您错过了其中一个,那么您可能会遇到类似的TS错误:这是因为节点类型

  

  我们可以收听通过程序化事件侦听器创建的任何代码示例。除了Settimeout和SetInterval外,通常还有一些第三方库的示例,例如TimePicker,DatePicker,Echarts图表。

  作者:阳光同学