type
status
date
slug
summary
tags
category
icon
password
Edited
Oct 24, 2022 03:14 PM
Created
Oct 24, 2022 03:07 PM
原理
节流
事件触发后,规定时间内,事件处理函数不能再次被调用。也就是说在规定的时间内,函数只
能被调用一次,且是最先被触发调用的那次。
防抖
多次触发事件,事件处理函数只能执行一次,并且是在触发操作结束时执行。也就是说,当一
个事件被触发准备执行事件函数前,会等待一定的时间(这时间是码农自己去定义的,比如 1
秒),如果没有再次被触发,那么就执行,如果被触发了,那就本次作废,重新从新触发的时
间开始计算,并再次等待 1 秒,直到能最终执行!
使用场景
节流
:滚动加载更多、搜索框搜的索联想功能、高频点击、表单重复提交……防抖
:搜索框搜索输入,并在输入完以后自动搜索、手机号,邮箱验证输入检测、窗口大小 resize 变化后,再重新渲染。Code
节流
防抖
全面
参考链接:
- 作者:JinSo
- 链接:https://jinso365.top/article/throttle-debounce
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。