函数防抖节流转载

采用debounce(防抖)和(防抖)和throttle(限制)以一种在不影响实际结果的情况下减少调用频率的方式。

功能防抖：将多个操作合并为一个操作。原则是维护一个计时器，该计时器指定要在delay函数在该时间之后触发，但在delay如果在该时间内再次触发，则取消并重置上一次计时器。这样，只有最后一个操作才能被触发。

function debounce(fn, wait) {
var timeout = null;
return function() {
if(timeout !== null) clearTimeout(timeout);
timeout = setTimeout(fn, wait);
} } // 处理函数 function handle() {
console.log(Math.random()); } // 滚动事件 window.addEventListener(scroll, debounce(handle, 1000));

函数限制：使函数在特定时间内仅触发一次。其原理是通过确定是否已达到某一时间来触发函数。

var throttle = function(func, delay) {
var prev = Date.now();
return function() {
var context = this;
var args = arguments;
var now = Date.now();
if (now - prev >= delay) {
func.apply(context, args);
prev = Date.now();
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener(scroll, throttle(handle, 1000))

区别： 函数节流确保真正的事件处理函数必须在指定的时间内执行一次，无论该事件被触发的频率如何，而函数防抖动只在最后一个事件后触发函数。

例如，在页面的无限加载方案中，我们需要用户发送 Ajax 请求，而不是仅在用户停止滚动页面进行操作时才请求数据。这种情况适合采用节流技术。

转载于:https://www.cnblogs.com/anbozhu7/p/11250183.html