Js中防抖和节流的区别，论如何避免重复点击
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Js中防抖和节流的区别，论如何避免重复点击相关的知识，希望对你有一定的参考价值。
参考技术A 在进行窗口的resize、scroll，输入框内容校验，防止按钮重复点击等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，体验糟糕。所以可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。我们一起先来看看防抖和节流的区别
防抖函数 debounce
节流函数 throttle
如何调用
防抖和节流都利用了闭包，首先就调用了debounce和debounce方法，把内部的方法返回出去，下次自己执行，以后有时间我再写一下闭包吧，所以我还留下一个问题，这样会不会造成内存泄漏？
Flutter中的节流与防抖（过滤重复点击）
参考技术A在一些计算较为复杂、操作较为耗时或者操作为引起页面重绘的场景，如果事件触发的频率毫无限制，除了带来性能上的负担，还会导致糟糕的用户体验。如：根据输入框输入的内容向服务端查询相关文章，用户多次点击收藏按钮……
在触发事件时，不立即执行目标操作，而是给出一个延迟的时间，在该时间范围内如果再次触发了事件，则重置延迟时间，直到延迟时间结束才会执行目标操作。
如设定延迟时间为500ms，
连续点击 收藏 按钮，停止点击时才会执行”收藏/取消收藏“操作，只会执行一次”收藏/取消收藏“操作
在触发事件时，立即执行目标操作，同时给出一个延迟的时间，在该时间范围内如果再次触发了事件，该次事件会被忽略，直到超过该时间范围后触发事件才会被处理。
如设定延迟时间为500ms，
连续点击 收藏 按钮，在第一次点击时会立即执行”收藏/取消收藏“操作，在本次操作执行完成前的多次点击会被忽略，只会执行一次”收藏/取消收藏“操作。
部分场景，如收藏等一些按钮，在连续多次点击时，上述方案可以过滤逻辑上的重复问题，但在UI上并没有做任何处理，比如做禁用样式、动画样式等
以上是关于Js中防抖和节流的区别，论如何避免重复点击的主要内容，如果未能解决你的问题，请参考以下文章