效果:数值从 0 到 10 来回变化
代码:
- var a = 0var timer1,
- timer2;
- function add() {
- a++;
- console.log(a);
- if (a >= 10) {
- clearInterval(timer1);
- timer2 = setInterval(sub, 200);
- }
- }
- function sub() {
- a--;
- console.log(a);
- if (a <= 0) {
- clearInterval(timer2);
- timer1 = setInterval(add, 200);
- }
- }
- timer1 = setInterval(add, 200);
---------- 分割线 ------------------------
此效果看似简单,但是实际写的时候发现 JS 定时器有一些不易察觉的坑,一不小心就会造成定时器叠加,导致变化越来越快,直到变化间隔达到浏览器的极限(chrome 的为 5ms)。值得注意的是,虽然每次都用 clearInterval 把 timer 清楚掉了,但是每次新的循环还是会使 timer 的值在原有基础上加 1
来源: http://www.92to.com/bangong/2016/12-11/14217406.html