首先给大家分享一个巨牛巨牛的人工智能教程,是我无意中发现的。教程不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵段子,像看小说一样,哈哈~我正在学习中,觉得太牛了,所以分享给大家!点这里可以跳转到教程
谈到动画,就避不开setTimeout与setInterval,都能实现动画效果,但对我来说,只有需要手动控制帧的速率、频率时,我才会优先选择setTimeout,因为我知道,论性能,setTimeout略逊于setInterval。
造成性能差异的原因,主要有两点:
1. setTimemout迭代式方法的调用方式,压栈、出栈都不是轻量级的任务;
2. setTimeout自身消耗了部分性能;
为了验证自己的想法,特意用Chrome时间线工具进行了监测:
从下图可以看出,setInterval只执行一次,并且定时器的ID始终不变,从执行堆栈看,后续的所有任务都全由调用的函数(move)承担,所以自身消耗的时间较短,其他任务消耗的时间较多,21us VS 610us。
从setTimeout的时间线可以看出,setTimeout需要执行多次,并且每次执行,定时器的执行ID都会生成新的ID,从执行堆栈看,setTimeout的相关指令还会执行两次,所以自身消耗的时间更多,见下图。
测试代码
var item = $('#imgHy'), count = 10;function move() { item.css({ "margin-top" : 0 - count }) if(count < 500) { count = count + 10; // 启用setInterval时,注销此代码 setTimeout(move, 10) } else { // 启用setTimeout时,注销此代码 //clearInterval(timer) }}// 启用setInterval时,注销此代码setTimeout(move, 10)// 启用setTimeout时,注销此代码//var timer = setInterval(move, 10)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19