setTimeout和setInterval
setTimeout
将函数的执行推迟到一段时间之后再执行
语法：setTimeout(func|code, delay)
注意：
setTimeout的第一个参数为『函数名』，而不是函数的调用
setTimeout的第二参数『delay』,表示一段时间之后再执行，但是也有一些特殊情况
var start = Date.now()var i = 0function 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 = 0function 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 timerIdfunction 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 = falsewindow.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)参考：
版权声明：本文为博主原创文章，未经博主许可不得转载
原著是一个有趣的人,若有侵权,请通知删除
还没有人抢沙发呢~