JavaScript面试题-函数节流？防抖？

函数节流

一个函数执行一次后，只有大于设定的执行周期后才会执行第二次

function throttle(fun, delay) { let startTime = 0 // this 为 window console.log(this) // 将函数作为返回值返回 return function () { let nowTime = Date.now() // 当时间间隔大于 设定的时间间隔 时调用函数 if (nowTime -startTime > delay) { // this 为 document console.log(this) fun() // 修改this 指向将其改为 document // fun.call(this) startTime = nowTime } } } document.onmousemove = throttle(function () { console.log(Date.now()) // 未修改 this 指向时，this 为 window console.log(this) }, 3000)

防抖

一个需要频繁触发的函数，在规定时间内只让最后一次生效

let txt = document.getElementById('txt') function debounce(fn, delay) { let timer = null return function () { // 先清除定时器 clearTimeout(timer) // 创建定时器 timer = setTimeout(function() { // 修改 this 指向 fn.apply(this) console.log(this) }.bind(this), delay) } } txt.onkeyup = debounce(function () { console.log('防抖') console.log(this) }, 1000)