使用第三方库：
lodash ：
debounce
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">发请求</button>
<script>
// 要求： 1秒内，如果多次按下 发起请求，只执行一次
let btn = document.getElementById('btn')
let time = ''
btn.onclick = function (){
if(time){
if( new Date() - time < 1000){
return
}
}
time = new Date()
setTimeout(
()=>{
console.log('请求成功！')
},3000
)
}
</script>
</body>
</html>
首先理解一下什么是节流，我个人理解是：
节流： 防止向后端发送请求中，服务器还没有返回结果，再次发送请求。 （也就是说： 在发起请求后，只有当服务器结果返回，才可以继续发送下次请求）
（防止： 同时发送多个相同的请求）
实现： 设置一个开关，在发送的时候关闭，等到请求成功，返回结果后，再打开开关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn">按钮</button>
<script>
let btn = document.getElementById('btn')
let canclick = true
btn.onclick = () => {
if (canclick) {
canclick = false
console.log('发送请求')
setTimeout(() => {
console.log('请求成功，返回结果')
canclick = true
}, 3000)
}
}
</script>
</body>
</html>
防抖： 防止在极短时间内多次请求响应（比如：在0.5s内，发送三次请求响应，这样做没有必要。）
实现： 如果在0.5内一直点击按钮，会清除定时器，只有在点击按钮0.5s后，才会向后端发送请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn">按钮</button>
<script>
let btn = document.getElementById('btn')
let timer
btn.onclick = () => {
if (timer) {
clearInterval(timer)
}
timer = setTimeout(() => {
console.log('发送请求')
setTimeout(() => {
console.log('请求成功，返回结果')
}, 3000)
}, 500)
}
</script>
</body>
</html>
节流 + 防抖： 既防止同时发送多个一样的请求，也防止在极短时间内请求响应多次
实现 代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn">发送请求</button>
<script>
// 节流：防止在发送请求中，结果还没返回， 再次发送请求
// 防抖：防止在极短时间内，不小心多次点击了同一个按钮(防止短时间内请求响应多次)
let btn = document.getElementById('btn')
let timer
let canclick = true
btn.onclick = () => {
if (timer) {
clearInterval(timer)
}
timer = setTimeout(() => {
if (canclick) {
console.log('发送请求')
canclick = false
setTimeout(() => {
console.log('请求成功，返回结果')
canclick = true
}, 3000)
}
}, 500)
}
</script>
</body>
</html>