JS数据驱动的定时器开关(可暂停)

JavaScript012

JS数据驱动的定时器开关(可暂停),第1张

原本我们若想将一个定时器暂停或清除,我们通常会用clearInterval()的方法。我们在setInterval时存储这个Interval的id,之后再需要暂停时通过id查找并清除该定时器(甚至需要记录请出时变化的数据),等到需要定时器继续运转我们就setInterval()在创建一次。

本次在大量使用定时器的过程中,为了优化繁琐的操作,我给定时器内部回调函数添加了数据驱动, 每个操作对应 一个常驻定时器 只在页面初始化时创建一次定时器,后续不再重新创建或释放

接下来我会举几个本次做的例子:

如果我们用传统释放定时器的方式,那么释放时我们还需记录运行时间,当前状态等。重新创建我们还需要把记录的值传递进去,不甚繁琐。

以上两个例子就是本次思想的精髓, 之后准备二次封装一个新的定时器,敬请期待

做完了: 数据驱动二次封装定时器工具类

球球你们看完点个赞吧。

12.2 事件驱动与事件处理

事件驱动是JavaScript响应用户操作的一种处理方式,而事件处理是JavaScript响应用户操作所调用的程序代码。

12.2.1 事件驱动

在多年以前,计算机程序通常是以批处理的模式运行。所谓批处理,就是开发者事先写好一些代码,再将这些代码一次运行。这种处理方式有点类似于通过HTML代码直接编写的网页。浏览器只是将HTML代码逐行解析,并显示在浏览器窗口。

后来,在批处理模式中,开发者可以加入一些特定的代码,在程序批处理期间,可以停下来等待用户输入一些信息,并根据用户输入的信息来判断和执行某个程序分支,这就使程序有了初步的交互性。

随着鼠标、触摸屏等设备的出现,批处理时代就逐渐远去,取而代之的是事件驱动的时代。当然,批处理也还能使用,只是使用的范围和频率比事件驱动要少得多。以鼠标为例,在事件驱动中,用户可以使用鼠标单击等方式进行操作,程序则根据鼠标指针的位置以及单击的方式进行响应。JavaScript使用的就是这种事件驱动的程序设计方式。

在JavaScript中,事件(Even)包括以下两个方面:

● 用户在浏览器中产生的操作是事件,如单击鼠标、按下键盘上的键等。

● 文档本身产生的事件,如文档加载完毕、卸载文档等,都是事件。

12.2.2 事件处理

在JavaScript中,浏览器会使用事件来通知JavaScript程序响应用户的操作。事件的类型有很多种,如鼠标事件、键盘事件、加载与卸载事件、得到焦点与失去焦点事件等。在事件产生的时候,浏览器会调用一个JavaScript程序来响应这个事件,这就是JavaScript的事件处理方式。要想让浏览器可以调用合适的JavaScript程序,就必须要做到以下 3点:

(1)设置HTML文档中响应事件的元素。在一个HTML文档中,并非所有元素都会去响应事件。就鼠标单击事件而言,一般在HTML文档的正文不会响应该事件,但在按钮中一般都会响应该事件。

(2)设置元素响应事件的类型。在确定了哪些元素响应事件之后,要设置该元素响应事件的类型。例如,一个按钮通常会响应鼠标单击事件(click事件),而一个下拉列表框通常会响应选项变化事件(change事件)。在同一个元素中,也可以响应多个事件。例如,一个超链接,在鼠标移动到该超链接上时,可以响应鼠标移动到对象上事件(mouseover事件),当鼠标从超链接上移开时,又可以响应鼠标移开事件(mouseout事件)。

(3)设置响应事件的程序。为了让浏览器可以响应事件,必须要设置响应事件的程序。例如一个按钮被单击时,浏览器会响应这个click事件,此时浏览器就会在JavaScript中寻找一个合适的程序,并运行该程序。这个程序可以是用户自定义的函数,也可以是一段JavaScript代码,还可以是JavaScript内置对象的方法等。

看看这个 http://ajava.org/readbook/js/jsdaq/4709.html更详细