- 你是不是遇到过提交按钮，点击多次发生多次提交的困惑？
- 是不是遇到过下拉搜索框每按一次键盘就请求一次接口，scroll、resize事件频繁执行的困惑？
使用 节流和防抖 就可以解决此类问题
节流
原理：初次触发时，立即执行事件，n秒后才能再次执行，n秒之内触发无效
应用：主要解决 按钮重复点击 问题
代码实现
function throttle(func,time) {
let ifCanClick = true;
return function () {
if (ifCanClick) {
func.apply(this, arguments); // 执行 并透传this和参数
ifCanClick = false;
let setTime = setTimeout(function () {
ifCanClick = true;
clearTimeout(setTime);
}, time);
}
};
}
// 按钮 绑定 节流
let twoDiv = document.getElementsByClassName('stop-dou')[0];
twoDiv.onclick = throttle( function (e) {
console.log('有效点击,去执行');
// 逻辑代码
}, 3000);
防抖
原理：初次触发事件，n秒后延迟执行，没触发一次就重新计时
应用：下拉搜索input框，scroll，resize，防止页面卡顿
代码实现
function debounce (func, time) {
let setTime = null
return function () {
console.log(5555)
let _this = this;
let _arguments = arguments;
clearTimeout(setTime);
setTime = setTimeout(function () {
func.apply(_this, _arguments);
}, time);
}
}
// 绑定 防抖 事件
let myInput = document.querySelector('.input-text');
myInput.onkeydown = debounce(function(e) {
console.log('开始执行一次')
let text = e.target.value;
let showTag = document.querySelector('#showTag');
showTag.textContent = text;
}, 500)
使用 lodash.js 插件库实现节流和防抖
import _ from lodash.js
_.throttle(function() { // 节流函数
// 逻辑代码
}, 3000)
_.debounce(function() { // 防抖函数
// 逻辑代码
}, 3000)
注意：函数参数不能用箭头函数
