JavaScript：函数防抖与节流

let callNow = !timeout; // 第一次会立即执行，以后只有事件执行后才会再次触发

timeout = setTimeout(function () {

timeout = null;

}, wait)

if (callNow) {

func.apply(context, args)

}

}

else {

timeout = setTimeout(function () {

func.apply(context, args)

}, wait);

}

}

}

节流

完成节流可以使用时间戳与定时器的写法

使用时间戳写法，事件会立即执行，停止触发后没有办法再次执行

function throttled1(fn, delay = 500) {

let oldtime = Date.now()

return function (…args) {

let newtime = Date.now()

if (newtime - oldtime >= delay) {

fn.apply(null, args)

oldtime = Date.now()

}

}

}

使用定时器写法，delay 毫秒后第一次执行，第二次事件停止触发后依然会再一次执行

function throttled2(fn, delay = 500) {

let timer = null

return function (…args) {

if (!timer) {

timer = setTimeout(() => {

fn.apply(this, args)

timer = null

}, delay);

}

}

}

可以将时间戳写法的特性与定时器写法的特性相结合，实现一个更加精确的节流。

function throttled(fn, delay) {

let timer = null

let starttime = Date.now()

return function () {

let curTime = Date.now() // 当前时间

let remaining = delay - (curTime - starttime) // 从上一次到现在，还剩下多少多余时间

let context = this

let args = arguments

clearTimeout(timer)

if (remaining <= 0) {

fn.apply(context, args)

starttime = Date.now()

} else {

timer = setTimeout(fn, remaining);

}

}

}

应用场景

节流在间隔一段时间执行一次回调的场景有：

• 滚动加载，加载更多或滚到底部监听

• 搜索框，搜索联想功能

防抖在连续的事件，只需触发一次回调的场景有：

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测

总结

三套“算法宝典”

算法刷题LeetCode中文版（为例）

人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。

最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注