问题

使用原生的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" id="test" name="test" value="test"></input>
    <input type="button" id="removetest" name="removetest" value="removetest"></input>
    <script type="text/javascript">
    /************************ timer定时器插件 start **********************/
    (function () {
        /* 此函数让 定时器处理handler，
            可以获取到 调用 setTimeout_context_binding 的对象 */
        var setTimeout_context_binding = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
          var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
          return window.setTimeout(vCallback instanceof Function ? function () {
                vCallback.apply(oThis, aArgs);
          } : vCallback, nDelay);
        };

/* 此函数让 定时器处理handler，
            可以获取到 调用 setTimeout_context_binding 的对象 */
        var setInterval_context_binding = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
            var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
            return window.setInterval(vCallback instanceof Function ? function() {
                vCallback.apply(oThis, aArgs);
            } : vCallback, nDelay);
        };

/* 定义定时器的构造函数 */
        var timer = function(fnAlarm, options)
        {
            /* external settable */
            this.fnAlarm_inner = function(){
                $("#timer_msg").printMsg(this.timerHandle.toString()
                    + "-please add custom fnAlarm")
            };

this.timeout = undefined;
            this.interval = undefined;
            this.contextDom = undefined;

/* inner maintain variable */
            this.timerHandle;

/* set external variable */
            if ( fnAlarm )
            {
                this.fnAlarm_inner = fnAlarm;
            }

if ( options )
            {
                if ( options.timeout )
                {
                    this.timeout = options.timeout;
                }

if ( options.interval )
                {
                    this.interval = options.interval;
                }

if ( options.contextDom )
                {
                    this.contextDom = options.contextDom;
                }
            }
        }

/* 定义定时器的原型方法 */
        timer.prototype.start = function(){
            var context_binding_timer = undefined;
            var time_value = undefined;

if ( this.timeout ) {
                context_binding_timer = setTimeout_context_binding;
                time_value = this.timeout;
            } else {
                context_binding_timer = setInterval_context_binding;
                time_value = this.interval;
            }

this.timerHandle = context_binding_timer.call(this, function(){
                /* 上下文DOM绑定的目的在这里：
                    如果此定时器绑定的DOM已经从文档中删除，则不调用定时处理handler */
                if ( this.contextDom && !document.body.contains(this.contextDom) )
                {
                    this.stop();
                    return;
                }

this.fnAlarm_inner.call(this);
                delete this.timerHandle;
            }, time_value);
        };

timer.prototype.stop = function(){
            if ( this.timeout ) {
                clearTimeout(this.timerHandle)
            } else {
                clearInterval(this.timerHandle)
            }
            delete this.timerHandle;
        };

timer.prototype.getTimerID = function(){
            return this.timerHandle;
        };

/* 开放接口 */
        window.ContextBindingTimer = timer;
    })();
    /************************ timer定时器插件 end **********************/

//bind remove button event
    document.getElementById("removetest").onclick=function(){
        var test = document.getElementById("test");
        test.parentNode.removeChild(test);
    }

var targetDom = document.getElementById("test");

/* construct a interval timer with setTimeout timer */
    var timer = new ContextBindingTimer(function(){
        console.log("access once!")
    }, {timeout:1000, contextDom:targetDom})
       
    timer.start()
    </script>
</body>
</html>

Implementation effect

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

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

JavaScript实现绑定DOM的定时器插件的更多相关文章

  1. JavaScript——BOM和DOM

    什么是BOM bom:浏览器对象模型 什么是DOM dom:文档对象模型 BOM操作: 调用windows浏览器窗口 windows对象可以通过点调用子对象 windows.navigator对象,可 ...

  2. Javascript事件绑定的几种方式

    Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器): [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后 ...

  3. javascript系列之DOM(三)---事件

    原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...

  4. 第一百二十一节，JavaScript事件绑定及深入

    JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...

  5. Javascript事件模型（三）：JavaScript事件绑定方法总结（及Jquery）

    JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 JQuery中绑定事件的几种方法 主要有on().bind( ...

  6. JavaScript(1)---绑定事件、解除绑定事件

    JavaScript(1)---绑定事件.解除绑定事件 一.事件概述 1.事件的几个概念 · 事件 指的是文档或者浏览器窗口中发生的一些特定交互瞬间.我们可以通过侦听器(或者处理程序)来预定事件,以便 ...

  7. 【JavaScript基础】Js的定时器（你想看的原理也在哟）

    [JavaScript基础]Js的定时器(你想看的原理也在哟) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 本章是经历 ...

  8. JavaScript进阶内容——DOM详解

    JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...

  9. 借助JavaScript中的Dom属性改变Html中Table边框的颜色

    借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...

随机推荐

  1. 20145308刘昊阳 《Java程序设计》第3周学习总结

    20145308刘昊阳 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 认识对象 要产生对象必须先定义类,类是对象的设计图,对象是类的实例 类是从少数实例推广到大量相似实例的 ...

  2. [iOS-UI]给输入框添加清除按钮的代码

    UIButton *clearButton = [self.textField valueForKey:@"_clearButton"]; [clearButton setImag ...

  3. Emoji表情符号录入MySQL数据库报错

    版本一: 1,查看tomcat后台日志,核心报错信息如下:   Caused by: java.sql.SQLException: Incorrect string value: '\xF0\x9F\ ...

  4. 深入浅出 - Android系统移植与平台开发（五）－ 定制手机模拟器ROM

    一. 修改化定制Android4.0系统 Android系统启动时,先加载Linux内核,在Linux的framebuffer驱动里可以定制开 机界面,Linux内核启动成功后,挂载根文件系统,启动A ...

  5. Maya 2015 中英文切换

    我们在使用Maya软件的时候,有时候需要把语言在中英文之间切换,目前我感觉在不用插件的情况下,下面两种方法可以比较容易的做到: 方法一: 右键我的电脑属性,高级系统设置里面找到环境变量面板,然后新建一 ...

  6. html中隐藏域hidden的作用介绍及使用示例

    基本语法: <input type="hidden" name="field＿name" value="value"> 作用:  ...

  7. 第二章 Odoo的安装与部署

    Odoo的官方推荐是Ubuntu Server,所以,我们这里也以Ubuntu Server为例.当然,其他系统也是可以的,只不过安装起来相比Ubuntu 会显得稍微折腾,限于篇幅,本书不对其他系统的 ...

  8. html图片和文字的细节

    ul中的每一个li如果里面添加“一个图,一行字”, 这样图片会紧贴在左侧,而文字会居中,这两个元素不会紧贴着. 产生这种问题的原因我推测是:我图片设置了左浮动,但文字没有设置浮动,而一旦将文字设置为浮 ...

  9. WIN8 MTK驱动不能安装解决办法

    1.把鼠标移动到桌面最右下角的位置会出来一个侧边栏,按那个齿轮就是“设置”,会出来个菜单,选择最下边的“更多电脑设置” 注:也可以按快捷键“WIN+I” 2.选择“常规”→“高级启动”→”立即重启“ ...

  10. DOS中cmd里常见的命令

    我们使用计算机接触最频繁的就是DOS.DOS是英文Disk Operating System的缩写,意思是“磁盘操作系统”,顾名思义,DOS主要是一种面向磁盘的系统软件,说得简单些,DOS就是人给机器 ...