脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS动画定时器

JS动画定时器知识总结

 更新时间：2018年03月23日 08:35:44   作者：正月初五  
这篇文章给大家总结了关于JS动画中定时器的相关用法以及相关知识点总结，有需要的朋友可以参考学习下。

广义说：一切通过js改变的视觉呈现都叫动画；例如，按钮，链接等元素交互反馈。

狭义说：通过定时器连续调用js函数进行元素属性改变产生的视觉动画效果。

定时器

定时器是JavaScript动画的核心技术；

setTimeout(),setInterval()是大家熟知的，以前经常使用的；

一般都是做些辅助性，锦上添花的事；

细心的人可能会发现一个现象，从其他标签页切换到有循环动画页面会有卡顿和急速帧切换现象；

问题就在于他们的内在运行机制；

认识setTimeout

第一个参数推荐用函数形式，字符串形式会两次解析，还有eval一样的问题；

不止两个参数，可以更多，见示例1；

this指向问题，见示例2；

返回值是个整数；

clearTimeout(timer)取消定时器；

setInterval,clearInterval同上；

示例1：

setTimeout(function(a,b){ 
 console.log(a+b); 
},1000,1,1)；

示例2：

var a = 0;
function foo(){
 console.log(this.a);
};
var obj = {
 a : 2,
 foo:foo
}
setTimeout(obj.foo,100);

运行机制

示例：

setTimeout(function(){ 
 console.log(1); 
}); 
console.log(0);

原因：加入队列，阻塞执行。

setTimeout图例：

setInterval图例：

存在即合理

父子元素事件冒泡，需要先执行父元素，见示例3；

用户自定义的回调函数，通常在浏览器的默认动作之前触发，见示例4；

示例3：

<div id="myDiv" style="height: 100px;width: 100px;background-color: pink;"></div>
<script>
myDiv.onclick = function(){
 setTimeout(function(){
  alert(0);
 })
}
document.onclick = function(){
 alert(1);
}
</script>

示例4：

<input type="text" id="myInput">
<script>
myInput.onkeypress = function(event) {
 setTimeout(function(){
  myInput.value = myInput.value.toUpperCase();
 });
}
</script>

认识requestAnimationFrame

用法与setTimeout类似，只是不需要时间参数；

机制完全不同：

1，setTimeout是异步操作，加入任务队列（ event loop ），当js引擎线程中同步代码执行完才会从任务队列中取出执行；

2，raf是用户代理（浏览器）专门针对动画开发的接口，用户代理会以合适的频率进行动画帧更新（一般同显示器刷新频率，1000/60ms），在隐藏或者非活动页面会停止帧更新，节省CPU资源；

3，raf示例

raf简单兼容

window.requestAnimFrame = (function(){ 
 return window.requestAnimationFrame || 
   window.webkitRequestAnimationFrame ||   
   window.mozRequestAnimationFrame || 
   function( callback ){  
    window.setTimeout(callback, 1000 / 60);
    };
  })();

您可能感兴趣的文章:

相关文章

  • js setTimeout()函数介绍及应用以倒计时为例

    js setTimeout()函数介绍及应用以倒计时为例

    setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式，下面有个倒计时的示例，需要的朋友可以学习下
    2013-12-12
  • 多种方式实现JS调用后台方法进行数据交互

    多种方式实现JS调用后台方法进行数据交互

    几种典型常用的方法如利用控件的AutopostBack属性、Button提交表单等等，下面为大家分享下JS调用后台方法进行数据交互示例
    2013-08-08
  • 通过继承IHttpHandle实现JS插件的组织与管理

    通过继承IHttpHandle实现JS插件的组织与管理

    最近，项目中的用到的Js插件越来越多，有的是用原生javascript写的，有的是调用的jquery插件，页面上Js和Css文件的引用也越来越混乱，而且Js文件之间还有引用先后的依赖关系
    2010-07-07
  • javascript闭包的使用之按钮切换功能

    javascript闭包的使用之按钮切换功能

    闭包就是能够读取其他函数内部变量的函数.这篇文章通过实例代码给大家介绍了javascript闭包的使用之按钮切换功能，感兴趣的朋友一起看看吧
    2018-08-08
  • JavaScript实战之菜单特效

    JavaScript实战之菜单特效

    这篇文章主要为大家详细介绍了JavaScript实战之菜单特效实现代码，具有与一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JS实现简单的下雪特效示例详解

    JS实现简单的下雪特效示例详解

    很多南方的小伙伴可能没怎么见过或者从来没见过下雪，这篇文章小编给大家带来一个小Demo，模拟了下雪场景。感兴趣的小伙伴快来跟随小编一起学习一下吧
    2021-12-12
  • 颜色渐变效果

    颜色渐变效果

    [蓝色]颜色渐变效果...
    2006-07-07
  • JavaScript中动态向表格添加数据

    JavaScript中动态向表格添加数据

    本文给大家分享使用原生javascript实现动态向表格中添加数据的方法，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
    2017-01-01
  • JavaScript中对象介绍

    JavaScript中对象介绍

    这篇文章主要介绍了JavaScript中对象介绍,本文直接用实例讲解对象的创建、删除等操作,并总结了Object属性、Property属性,需要的朋友可以参考下
    2014-12-12
  • JavaScript检测浏览器是否支持CSS变量代码实例

    JavaScript检测浏览器是否支持CSS变量代码实例

    这篇文章主要介绍了JavaScript检测浏览器是否支持CSS变量代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04

最新评论