防抖
需求场景：
当用户频繁点击一个请求按钮时，如果不做任何处理，那么点了多少次，这个按钮绑定的请求事件就会执行多少次。
解决方案一：在请求前 设置按钮diable状态为true, 请求结束后设置disable状态false。
解决方案二：写一个防抖函数，比如点击这个按钮1秒后再去提交请求。
节流 需求场景： 举例：拖动一个div,在div被拖动过程中执行一个函数，为了简化代码，我这里以鼠标在移动过程中触发某个动作（事件/方法/函数...）作为例子。
试比较如下两个例子
实现节流前：
window.addEventListener("mousemove",mousemoveFn);
function mousemoveFn() {
console.log("鼠标正在移动中...");
// 触发内容
}【节流--防抖】实现节流后：
window.addEventListener("mousemove",mousemoveFn);
let flag = true;
function mousemoveFn() {
if(flag){
flag = false
setTimeout(() => {
console.log("鼠标正在移动中...");
flag = true
}, 500);
}
}
推荐阅读
- 剑指offer29顺时针打印矩阵
- JavaScript 权威指南-学习笔记（一）
- 网页|SheetJS xlsx js库入门使用
- 单线程的 JavaScript 是怎么实现异步的?
- React|Redux中间件及其开发者工具
- 熊猫周刊|《熊猫周刊》-2022/03/25
- js|阿里开源项目LowCodeEngine低代码开发引擎
- React 性能调优记录（下篇），如何写高性能的代码
- java|看看人家那物流系统，那叫一个优雅（附源码）