使用原生的setTimeout和setInterval仅仅能够实现, 定时执行事件处理函数,

在网页开发中, 往往会出现一种情况,定时器用于定时更新某个页面区域的数据,

往往在页面加载之后, 就启动这个定时器, 往后则间隔执行此定时器。

 

页面上定时刷新的区域可能会动态消失, 特别是在ajax被广泛使用的今天,

如果定时刷新的区域被删除了, 则定时器材也需要自动清除掉。

 

此二个接口,如果实现这种效果需要, 自己维护定时器句柄, 并且在处理定时器事件函数的时候,

首先判断 指定的刷新区域是否还是存在的?  如果还存在, 则继续执行数据刷新的逻辑,

如果不存在, 则删除定时器,不执行数据刷新的动作。

 

方案

此类定时器需要与 目标DOM进行绑定, 在事件处理函数中, 判断如果DOM被删除, 则清理定时器。

 

Code

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>My First WebComponent</title>
</head>
<body>
    <input type="text" )
    }, {timeout:1000, contextDom:targetDom})
       
    timer.start()
    </script>
</body>
</html>

 

Implementation effect

页面上输入框删除之前, 定时器打印数目一直增加。

JavaScript实现绑定DOM的定时器插件

点击按钮删除输入框之后, 定时器打印数据则没有变化了, 证明定时器已经被删除。

JavaScript实现绑定DOM的定时器插件

相关文章: