节流(throttle)指的是在一段时间内,只执行一次函数。比如说,有一个按钮,点击一次后需要等待一秒才能再次点击,不然就不会执行。这个就是节流。
实现一个简单的节流函数,可以这样写:
javascript function throttle(fn, delay) { let timer = null; return function() { if (!timer) { timer = setTimeout(() => { fn.apply(this, arguments); timer = null; }, delay); } } }
这个函数接受两个参数,第一个是要执行的函数,第二个是时间间隔。函数内部使用了一个计时器,如果计时器不存在,就执行函数并设置计时器;如果计时器已存在,就不执行函数。
防抖(debounce)指的是在一段时间内,只执行最后一次函数。比如说,一个输入框需要在用户输入完毕后才能搜索,那么在用户连续输入的时候,就需要防止过多的搜索请求,只在用户停止输入一段时间后才发送搜索请求。
实现一个简单的防抖函数,可以这样写:
javascript function debounce(fn, delay) { let timer = null; return function() { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, arguments); }, delay); } }
这个函数接受两个参数,第一个是要执行的函数,第二个是时间间隔。函数内部使用了一个计时器,每次执行前先清除之前的计时器,然后设置一个新的计时器。如果在时间间隔内又触发了该函数,就清除之前的计时器,并设置一个新的计时器。