setTimeout/setInterval,属性、连续动画、倒计时的分析

2023-06-02,,

setTimeout、setInterval环境应用和使用场景

说明:setTimeout属于超时调用, setInterval 属于间隔调用

1,setTimeout超时的使用介绍:

var setTimeourtId= );
}, );

// 清除的操作

clearTimeout(setTimeourtId);

2, setInterval的间隔使用介绍:

var setIntervalId=);
}, );

clearInterval(setIntervalId);

我们很少使用间歇调用,因为后一个调用可能会在前一个调用结束之前调用,所以就使用超时调用代替间隔调用,超时调用使用是用递归的方法

;

);
} );

介绍完了这个项目中的应用,倒计时的案例,解决误差的问题,

js是单线程的,有可能是回调中的函数影响的,也可能是浏览器各种事件引起的,所以误差是不一样避免的,这时候我们减小误差

1,算出代码执行消耗的时间差

2,下一次循环所消耗的时间

* * *

* * ))
* * )
* ))
* )
)
;
? ? / )

/ );

};
})();

;

? ? flag = false : '';
flag ? e.style.left = ` ${left++}px` :
e.style.left = ` ${left--}px`;
}

(function animloop() {
render();
requestAnimFrame(animloop);
})();

浏览器可以优化并行的动画动作,更合理的重新排列动作序列,并把能够合并的动作放在一个渲染周期内完成,从而呈现出更流畅的动画效果
解决毫秒的不精确性
避免过度渲染(渲染频率太高、tab 不可见暂停等等)
注:requestAnimFrame 和 定时器一样也头一个类似的清除方法 cancelAnimationFrame

setTimeout/setInterval,属性连续动画、倒计时的分析的相关教程结束。

《setTimeout/setInterval,属性、连续动画、倒计时的分析.doc》

下载本文的Word格式文档,以方便收藏与打印。