节流 & 防抖
category
Web
date
Oct 24, 2022
icon
slug
throttle-debounce
status
Published
summary
节流防抖原理、区别以及应用
tags
JavaScript
type
Post
原理
节流
事件触发后，规定时间内，事件处理函数不能再次被调用。也就是说在规定的时间内，函数只
能被调用一次，且是最先被触发调用的那次。
防抖
多次触发事件，事件处理函数只能执行一次，并且是在触发操作结束时执行。也就是说，当一
个事件被触发准备执行事件函数前，会等待一定的时间（这时间是码农自己去定义的，比如 1
秒），如果没有再次被触发，那么就执行，如果被触发了，那就本次作废，重新从新触发的时
间开始计算，并再次等待 1 秒，直到能最终执行！
使用场景
节流：滚动加载更多、搜索框搜的索联想功能、高频点击、表单重复提交……防抖：搜索框搜索输入，并在输入完以后自动搜索、手机号，邮箱验证输入检测、窗口大小 resize 变化后，再重新渲染。Code
节流
防抖
全面
参考链接：