防抖和节流都是为了解决事件被频繁触发的问题
防抖(debounce)
原理:当持续触发事件时,在设定的时间内没有再次触发事件,则事件才会处理函数一次;如果在设定时间之前再次触发该事件,则重新开启定时器,执行最后一次触发事件
应用场景:
- scroll事件滚动
- 浏览器窗口的缩放resize事件
- 搜索框输入查询
- 表单验证
- 按钮提交
代码实例:
<input type="text"> <script> let inp = document.querySelector("input") inp.oninput = debounce(function () { console.log(this.value) }, 1000) function debounce(fn, delay) { let t = null return function () { if (t !== null) { clearTimeout(t) } t = setTimeout(() => { fn.call(this) }, delay) } } </script>
节流(throttle)
原理:在持续触发事件时,在一定时间内只调用一次事件函数,如果在设定时间内再次触发事件,则不执行,目的就是减少一段时间内的触发频率
应用场景:
- dom元素拖拽功能实现
- 计算鼠标移动距离
- 监听scroll事件滚动
- 搜索提交功能按钮
代码实例
<style> body { height: 2000px } </style>
<script> window.onscroll = throttle(function () { console.log("滚动") }, 500) function throttle(fn, delay) { let flag = true return function () { if (flag) { setTimeout(() => { fn.call(this) flag = true }, delay) } flag = false } } </script>
标签:function,触发,防抖,场景,节流,delay,flag,事件 From: https://www.cnblogs.com/qianduan-Wu/p/16657236.html