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

JavaScript026

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

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

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

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

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

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

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

球球你们看完点个赞吧。

把界面要变化的部分,抽取到动态数据中,通过数据变化,自动更新视图

react: 新建.js文件, 书写class,render

vue: 新建.vue文件, 书写template

react: state = { a: xxx, b : xxx }

vue: data(){

return {

a: xxx,

b: xxx

}

}

react: this.setState({状态名: 新的值})  (基于MVC,需要让setState通知更新)

vue: this.状态名 = 新的值    (基于MVVM会触发set通知watch更新)

当key相同时,且元素类型相同,会进行最小粒度更新,而key不同的时候,新旧虚拟dom对比,react||vue会认为是不同的两个元素,会直接进行替换。

使用数组的map方法,将每一个结构return出去

例:typeList.map(item=>{

          return <Button getBtn={getBtn} type={item.type} key={item.id}>{item.name}</Button>

       })

v-modal是表单控件的双向绑定指令,将表单控件的value值交给状态管理,在表单控件上绑定change事件,当表单控件的value值改变,立即触发change方法,在change方法中通过拿到事件对象改变value的状态并通知视图更新,便实现了双向绑定的原理!

因为函数的作用域是独立的,防止data中的数据被同一种组件的不同实例所影响。

1、插件源码主要基于angular directive来实现。 2、调用时关键地方是后台请求处理函数,也就是从后台取数据。 3、插件有两个关键参数currentPage、itemsPerPage,当前页码和每页的记录数。 4、实现方法调用后我们需要根据每次点击分页插件页码时重新提交后台来获取相应页码数据。 在调用的页码中我使用了$watch来监控。 我初次使用时是把调用函数放在了插件的onchange中,结果发现每次都会触发两次后台。这个地方需要注意。 5、我把请求后台封装成了Service层,然后在Controller里调用,也符合MVC思想。