节流函数的主要目的是限制一个函数在一定时间内只能执行一次。以下是一个使用JavaScript编写的基本节流函数:
function throttle(func, delay) {let lastCall = 0;return function() {const now = new Date().getTime();if (now - lastCall < delay) {return;}lastCall = now;return func.apply(this, arguments);}
}
这个函数接受两个参数,一个是要节流的函数,另一个是延迟时间(以毫秒为单位)。它返回一个新的函数,这个新的函数会检查自上次调用以来是否已经过了指定的延迟时间。如果是,则执行函数并更新最后调用的时间;如果不是,则忽略这次调用。
但是这个版本的节流函数并不能保证执行最后一次调用。为了实现这个需求,我们需要稍微修改一下代码:
function throttle(func, delay) {let lastCall = 0;let timeoutId = null;let lastArgs = null;return function() {const now = new Date().getTime();lastArgs = arguments;if (now - lastCall < delay) {if (timeoutId) {clearTimeout(timeoutId);}timeoutId = setTimeout(() => {lastCall = now;func.apply(this, lastArgs);}, delay);} else {lastCall = now;func.apply(this, arguments);}}
}
这个版本的节流函数在每次调用时都会记录参数,并且如果在延迟时间内再次被调用,它会取消前一个调用并安排一个新的调用。这样,最后一次调用总是会被执行,即使它发生在延迟时间内。