setTimeout和setInterval
setTimeout
将函数的执行推迟到一段时间之后再执行
语法：setTimeout(func|code, delay)
注意：
setTimeout的第一个参数为『函数名』，而不是函数的调用
setTimeout的第二参数『delay』,表示一段时间之后再执行，但是也有一些特殊情况
var start = Date.now()
var i = 0
function time() {
for (var j = 0; j < 1e9; j++) {
i++
}
console.log("Time: " + (Date.now() - start) + '毫秒')
var timeId = setTimeout(function () {
console.log('2000ms后执行')
}, 2000)
}
time()
// Time: 2493毫秒
// undefined
// 2000ms后执行
如上🌰代码：setTimeout第二个参数为2000ms,但是并不会是在调用函2000ms之后就会执行，而是会执行完成函数time内的for循环，因为for循环所需要的时间比 2000久，所以一旦for循环完成就立马(不再等待2000ms)执行setTimeout(func, 2000)，所以无论是 setTimeout 或是setInterval其第二个时间参数都不是绝对准确的
setTimeout(func|code, 0)
在当前代同步码执行完后，『
尽可能快』的执行的函数setTimeout(func|code, 0)
在控制台执行
console.log('first')
setTimeout(function f2() {
console.log('second')
}, 0)
console.log('third')
// 依次打印出如下
// 'first'
// 'third'
// 'second'
如上🌰所示：setTimeout(..., 0),会首先置于任务队列，直到同步任务执行完成，最后推入stack中执行。
setTimeout(func|code, 0)的应用
「setTimeout(func|code, 0)」可以将占用CPU较高的任务分成很多小段执行
🌰
<body>
<div id="countNumber"></div>
</body>
<script>
var countNumber = document.querySelector('#countNumber')
var i = 0
function print() {
do {
i++
countNumber.innerText = i
} while (i % 1e4 != 0)
// 将1e8分解成长度为10000为一段的多个小任务依次执行
if (i < 1e8) {
setTimeout(print, 0)
} else {
console.log('输出完毕')
}
}
print()
</script>
效果：
setTimeout与递归的结合
setTimeout与递归的结合，可以让函数间隔一定的周期执行。
function fn() {
var i = 0
for (var j = 0; j < 1000000; j++) {
i++
}
}
setInterval(fn, 1500)
如上例🌰：setInterval(fn, 1500)，是让函数fn间隔1500ms执行(本次函数调用开始到下次函数调用开始为时间周期为『1500』)，但是如果函数本身调用就需要消耗一大部分时间。则实际上两个函数执行之间的间隔，肯定是小于setInterval(fn, delay)第二个参数设定的值。
为了使两个函数执行的「时间间隔精确的接近设定好的值」，可以使用『setTimeout递归』
🌰
var start = Date.now()
var timeId = setTimeout(function printInfo() {
console.log('执行间隔：' + (Date.now() -start) + 'ms')
timeId = setTimeout(printInfo, 2000)
clearTimeout(timeId)
}, 2000)
上例代码，基本可以保证每次间隔的时间为2000ms
setInterval
让函数间隔一定时间周期性执行
语法：setInterval(func|code, delay)
clearTimeOut clearInterval
取消定时器函数的执行需要『调用 clearInterval clearTimeout』，需将 setInterval/setTimeout 返回的值作为参数传入
setTimeout与函数防抖
执行该函数，如果在指定的 X 毫秒内，再次执行则会取消刚刚的执行指令。如果执行了很多次操作，则最后一次操作为有效的操作(
之前的无效操作不计入时间，每一次操作都是重新开始)
可以理解为：都在一楼准备乘坐电梯，有人按了[[向上按钮]]，在规定间隔内(如20秒)乘坐电梯的人员都进入了电梯里面，且电梯外面没有人再按[[向上按钮]]则电梯上行。如果在这个二十秒内电梯外面的人又按了[[向上按钮]]，此时上一个电梯上行的指令会取消，电梯门打开，新的人员进来如果在新的二十秒内没有外面的人员按电梯[[向上按钮]]则电梯上行
实例代码🌰
var timerId
function debounce() {
if (timerId) {
clearTimeout(timerId)
}
timerId = setTimeout(function fn() {
console.log('that effective')
}, 1000)
}
// 1000毫秒内，只能执行一次有效的操作。如果多次执行，则会取消刚刚执行的指令
以上面的代码为例，封装一个函数防抖
let fn1 = () => { console.log('每次执行的间隔大于等于1.2秒，否则该次执行就会被取消') }
function debounce() {
let timerId = null
return function() {
if (timerId) { window.clearTimeout(timerId) }
timerId = setTimeout(() => {
fn.apply(this, arguments)
timerId = null
})
}
}
window.body.onscroll = debounce(fn, 1200)
setTimeout与函数节流
如果在规定的时间界限范围 X 内，连续执行多次执行命令，则只有第一次命令会有效。例如在规定的时间界限范围 2000毫秒 内，连续执行了很多次，结果是只有第一次执行的命令会生效。
let canIuseNow = false
window.body.onscroll = function throttle() {
if (canIuseNow) {
// 什么都不做
} else {
fn()
canIuseNow = true
var timerId = setTimeout(() => {
canIuseNow = false
}, 1200)
}
}
// 封装一个函数节流
function throttle(fn, delay) {
let canIuseNow = true
return function() {
if (canIuseNow) {
fn.apply(this, arguments)
canIuseNow = false
var timerId = setTimeout(() => canIuseNow = true, delay)
}
}
}
let fn1 = function() { console.log('函数的执行间隔时间大于 1500毫秒 即可') }
document.body.onscroll = throttle(fn1, 1500)
setTimeout函数实例运用
构建一个函数printNumbers(startNumber, endNumber)，依次打印出[startNumber, endNumber]之间的数字
方法①
function printNumbers(startNumber, endNumber) {
for (var i = startNumber; i <= endNumber; i++) {
(function() {
var j = i
setTimeout(function timerId() {
console.log(j)
}, j*1000)
})()
}
}
printNumbers(20, 30)
方法②
function printNumbers(startNumber, endNumber) {
for (let i = startNumber; i <= endNumber; i++) {
setTimeout(function timerId() {
console.log(i)
}, i*1000)
}
}
printNumbers(20, 40)
方法③
function printNumbers(startNumber, endNumber) {
var currentNumber = startNumber
var timeId = setTimeout(function fn() {
console.log(current)
if (current < endNumber) {
setTimeout(fn, 1000)
}
current++
}, 1000)
}
printNumbers(20, 30)
参考：
版权声明：本文为博主原创文章，未经博主许可不得转载
