一分钟简单理解防抖和节流

简介: 一分钟简单理解防抖和节流

目录


防抖节流有什么用

防抖节流怎么用

防抖

节流

防抖节流怎么记

防抖节流有什么用



防抖和节流,这是前端防止用户频繁调用同一个接口的方法,比如短时间重复点击上传同一个文件,短时间重复点击提交同一个评论,异步的操作还没给你带来反馈于是你重复上传了多个文件,重复提交了多个评论


防抖节流怎么用



防抖



防抖指的是设置延时器,比方说我点击之后设置一个2s的延迟,2s后开始上传,如果在2s之中再次点击该事件,那么这个延迟被清除,重置2s的延迟,也就是你一直乱点,只有你最后一次会成功。


节流



节流是设置状态锁,就是设置一个flag为true,当你点击的时候,会对flag进行判断,如果为true也就是第一次请求,那么开始请求,并且将flag设置为false,然后这时候你继续点击请求的时候,同样要判断flag,为false你再怎么点击也没用,然后什么时候再置为true呢?在你接口返回给前端,提示你已经上传完毕了之后置为true,你就可以再次提交请求了。


防抖节流怎么记



防抖:设置延迟,短时间高频率触发只有最后一次触发成功

节流:设置状态锁,短时间高频率触发只有第一次会触发成功


相关文章
|
4天前
节流、防抖
节流、防抖
17 2
|
4天前
|
前端开发 UED
关于防抖和节流的理解
防抖和节流是前端开发中常用的两种性能优化技术。
10 0
|
9月前
什么是防抖和节流,怎么实现一个防抖和节流?
功能:当事件被触发N秒之后再执行回调,如果在N秒内被触发,则重新计时。
|
9月前
|
JavaScript 前端开发
节流与防抖
节流与防抖
28 0
|
10月前
|
JavaScript 前端开发
什么是防抖和节流?如何实现防抖和节流?
防抖(debounce)和节流(throttle)是 JavaScript 中常用的两种性能优化方法。
|
11月前
|
前端开发 JavaScript
关于防抖和节流我所知道的
关于防抖和节流我所知道的
39 0
防抖&节流
防抖&节流
91 0
|
缓存 JavaScript
防抖和节流
防抖和节流