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)
参考:
版权声明:本文为博主原创文章,未经博主许可不得转载