2024年【总结】：JavaScript优化 —— 防抖节流 - 应用场景，面试阿里巴巴运营需要问什么问题

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

function payMoney() {

console.log(‘已剁’);

}

function debounce(payMoney, delay) {

let timer //1. 防止多次创建timer 2.(第二次点击时，由于闭包的原因 第一次的timer会存在)

return function () {

let context = this //保存button的this

let args = arguments //参数(注意，如果不传参，payMoney拿不到事件对象event)

clearTimeout(timer)

timer = setTimeout(() => {

payMoney.apply(context, args) //调用函数，修改this指向为context(button),添加参数

}, delay);

}

}

btn.addEventListener(‘click’,debounce(payMoney,2000))

二、节流

=======================================================================

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

节流的设计思路：

1. 触发事件

2. 判断：触发事件是否在时间间隔内？ 是：不触发；不是：触发

3. 设置定时

如果在规定时间内仍然有请求/事件的操作，会需要本次请求/事件操作，等待第一次的事件触发。

代码实现

function coloring() {

let r = Math.floor(Math.random() * 255)

let g = Math.floor(Math.random() * 255)

let b = Math.floor(Math.random() * 255)

document.body.style.background = rgb(${r},${g},${b})

}

function throttle(coloring,delay) {

let timer

return function() {

let contxt = this

let args = arguments

//判断：如果有timer，说明上一个时间还未结束

if(timer) {

return //没结束你就return停止，等上一个结束

}

timer = setTimeout(() => {

coloring.apply(contxt,args)

timer = null //timer不在事件完成之后给null的话，上面的if会一直判断为真

}, delay);

}

}

window.addEventListener(‘resize’,throttle(coloring,2000))

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

T2VueEF1QTMxNDlEQmRDMlU0bzBpY21pYVloa2szeXVFZmNydGV4MGYxSWljdFJGNU9RYUw5TWJHb0hiTmtWQlBQUGliTng0RWJpY0EvNjQw?x-oss-process=image/format,png)