1. 防抖函数
为什么需要防抖
先看这样一个例子: 我们需要根据用户的输入来想后台请求不同的数据
但是如果不设置某种规则, 而是当用户输入一个字符就发送一次请求, 这对于服务器的压力无疑是巨大的
// 需求: 获取用户输入的内容, 并返回相应的结果
var input = document.querySelector('input')
function getDate(value) {
console.log('ajax: ', value);
}
input.addEventListener("keyup", function (e) {
getDate(e.target.value)
})
那能不能当我们输入完以后, 再去调用请求函数向后台发送请求呢?
答案当然是可以的, 其中一种解决方案就是 使用防抖函数
什么是防抖函数
防抖函数是闭包的一个应用
在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时
也就是说, 防抖函数设置了这样一个规则: 我们设置一个定时器, 当事件被触发后的n秒后, 我们再去执行后续的操作, 比如发送网络请求, 但是如果在这n秒内, 事件又被触发一次, 那么定时器要重新计时, 重新在n秒后再去执行后续操作
举个例子
我们打游戏点了回城按钮 (触发事件)以后, 要等待10秒 (延时时间)才能进行传送 (后续操作), 但是如果倒计时在4s的时候, 我们又点击 (倒计时内再次触发)了一次回城, 那么倒计时将重新开始计时, 需要在重新等待10s后才能进行传送
var input = document.querySelector('input')
function getDate(value) {
console.log('ajax: ', value);
}
function debounce(callBack, delay) {
var timer;
return function (value) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(function () {
callBack(value)
}, delay)
}
}
var debounceInput = debounce(getDate, 1000)
input.addEventListener("keyup", function (e) {
debounceInput(e.target.value)
})
2. 节流函数
为什么需要节流
看这样一个需求: 当我们点击注册按钮, 则向服务器提交表单信息
// 需求: 点击按钮, 提交信息
var btn = document.querySelector('button')
btn.addEventListener('click', function () {
console.log('提交注册信息', new Date());
})
这里有一个很大的问题, 就是没有对按钮的点击事件进行妥善的处理, 导致每点击一次按钮, 就会发送一次表单提交, 这显然是不合理的
当然, 我们可以通过禁用来解决, 而这里我们可以用另外一种思路来解决
那就是 通过节流函数
什么是节流函数
规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
简单理解: 触发一个事件后, n秒内进行触发动作, 不会进行事件处理, 而是要等n秒后, 上一个事件处理完成后, 再进行触发
例子
这次以银行柜台办理业务为例, 5分钟办理一位, 5分钟之内哪怕后面的人再催, 也无法为其办理业务, 必须要等5分钟结束以后, 才能为下一位办理业务
// 需求: 点击按钮, 提交信息, 在3秒内再次点击, 不生效
var btn = document.querySelector('button')
function submit() {
console.log('提交注册信息', new Date());
}
function throttle(callBack, delay) {
var timer;
return function () {
if (!timer) {
callBack()
timer = setTimeout(function () {
timer = null
}, delay)
}
}
}
var throttleBtn = throttle(submit, 3000)
btn.addEventListener('click', function () {
throttleBtn()
})