最简洁的防抖与节流

防抖=>你点的再快都没用（新的点击会清除上一次的点击效果），要特定时间之后才会触发 节流=>点击就可以触发事件，但是特定时间内只会触发一次，（技能冷却） 防抖： let time2; document.getElementById('防抖').onclick = function () { clearTimeout(time2); time2=setTimeout(function () { //do something*** },2000); }; 适用场景 ： 按钮提交场景： 防止多次提交按钮，只执行最后提交的一次 服务端验证场景 ： 表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似 节流： let bool=true; document.getElementById('节流').onclick = function () { if(bool){ //do something*** bool=false; setTimeout(()=>{ bool=true },2000) } } 适用场景： 拖拽场景： 固定时间内只执行一次，防止超高频次触发位置变动 缩放场景： 监控浏览器resize 动画场景： 避免短时间内多次触发动画引起性能问题

本文章由javascript技术分享原创和收集