js中常用setTimeout()和setInterval()创建定时器，实现延迟或定时执行。
定时机制
js是运行在单线程环境中的，按照代码队列中的顺利依次执行
定时器在指定时间将执行代码加入到队列中，js在执行完队列中所有等待代码后，才会执行定时器的代码，所以执行时机是不能保证的。
其实js中没有任何代码是立刻执行的，但一旦进程空闲则尽快执行。
重复定时器
当重复定义定时器时，会有两个问题：
- 某些间隔会被跳过
- 多个定时器的代码执行之间的间隔可能会比预期的小
函数节流
当某些代码在不间断的情况下连续重复执行，比如浏览器的resize事件处理时会高频率计算和修改DOM的宽高，很可能会让浏览器崩溃，为了避免这种问题，可以使用函数节流。
<body>
<div id="main"></div>
<script>
// 节流函数
function throttle(method, context) {
clearTimeout(method.tId);
method.tId = setTimeout(() => {
method.call(context);
}, 100);
}
// 操作DOM的函数
function resizeDom() {
var div = document.getElementById('main');
div.style.height = window.innerHeight + 'px';
console.log(div.style.height);
}
window.onresize = function () {
throttle(resizeDom);
}
</script>
</body>
网友评论