标签：const charset put fun 输入 set button 时间间隔 点击
防抖
用户短时间内触发相同的网络请求, 我们限制请求次数, 减轻服务器之间的压力, 就叫防抖
举例来说: 某购物商城上面搜索框的智能提示, 用户输入东西之后, 会很快向服务器发送请求, 如果监听input事件而不做防抖操作,发送请求频率就会很频繁, 从而造成服务器压力过大
<!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>防抖</title>
</head>
<body>
<input type="text" id="ipt">
<script>
const ipt = document.querySelector("#ipt");
ipt.addEventListener("input", ev => {
debunceAjax(ev.target.value);
})
function ajax(val) {
console.log(val);
}
let debunceAjax = debunce(ajax)
function debunce(cb) {
return function (val) {
clearTimeout(cb.timer);
cb.timer = setTimeout(() => {
cb(val)
}, 1000)
}
}
</script>
</body>
</html>
防抖的核心是通过定时器来添加延迟, 从而延迟 网络请求的调用, 当用户短时间再次触发的时候 , 先清除该定时器 , 定时器如果时间没到 , 里面的网络请求就不会发送出去 , 随着清除定时器 一起释放了 , 网络请求自然就减少了
节流
所谓的节流, 主要是游戏用的多, 例如 英雄联盟 平A补刀, 假设用户点 A 就会发送请求, 那么, 只要这个人手速够快, 一秒钟点个十来次A, 英雄是否就会A 10刀呢? 其实不然, 无论该用户点击 A 多频繁, 英雄都只会在一定间隔内攻击一次, 这就是节流操作
在相同的事件内, 当前事件触发后, 用户再次触发该事件, 就会失效, 直到设置的节流时间 过 , 用户才能再次触发该事件
<!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>
const btn = document.querySelector("#btn");
btn.onclick = () => {
fnAjax()
}
const ajax = () => {
console.log("123")
}
const fnAjax = fn(ajax, 2000)
function fn(cb, delay) {
cb.flag = true
return function () {
if (cb.flag) {
cb.flag = false;
setTimeout(() => {
cb()
cb.flag = true
}, delay)
}
}
}
</script>
</body>
</html>
节流的核心, 同样是通过定时器, 来延迟发送网络请求的时间 , 和 防抖 的区别在于, 节流是通过 变量的布尔值 来控制 请求的时间间隔
标签：const charset put fun 输入 set button 时间间隔 点击
原文地址：https://www.cnblogs.com/liuyuexue520/p/13278590.html
