下划线 _.throttle()函数

简介

_.throttle()是下划线（Underscore.js）中的一个工具函数，用于限制某一函数在一定时间内被调用的次数。比如，当我们需要限制一个按钮在30秒内只能被点击一次时，可以使用该函数来实现。该函数接收两个参数，一个是要节流的函数，另一个是节流的时间（单位为毫秒）。

语法

_.throttle(func, wait, [options])

参数：

• func：要节流的函数。
• wait：节流的时间（单位为毫秒）。
• options：一个可选的参数对象，具体内容见下文。默认值为 {}。

返回值：

• 返回一个新的节流函数。

用法示例

简单示例

function doSomething() {
  console.log('节流函数被调用了');
}

const throttledDoSomething = _.throttle(doSomething, 1000);

for (let i = 0; i < 10; i++) {
  throttledDoSomething();
}

// 等待 1000 毫秒后，会输出一次“节流函数被调用了”

在上面的代码中，我们首先定义了一个名为doSomething的函数，然后通过 _.throttle 函数创建了一个名为 throttledDoSomething 的新函数，在这个新函数被调用的时候，实际上是在调用 doSomething 函数，并且同时限制了这个函数在 1000 毫秒内只能被调用一次。

绑定到 DOM 事件上

const throttledDoSomething = _.throttle(function() {
  console.log('按钮被点击了');
}, 30000);

document.querySelector('button').addEventListener('click', throttledDoSomething);

在上面的代码中，我们创建了一个名为throttledDoSomething的新函数，并将其绑定到按钮的 click 事件上面。这个新函数实际上是通过 _.throttle 函数创建出来的，它可以限制这个函数在 30000 毫秒内只能被调用一次。也就是说，当用户点击这个按钮时，如果上一次点击距离现在的时间不足 30 秒，则不会触发这个函数，否则才会执行。

options 参数

_.throttle 函数还支持一个可选的参数 options，用于配置一些细节内容。具体的选项如下：

• leading：布尔值，表示是否允许在延迟之前调用函数。默认值为 true。
• trailing：布尔值，表示是否允许在延迟之后调用函数。默认值为 true。

leading

当 leading 设为 false 时，表示禁止在函数还未被限制的时候调用一次函数。尤其是在页面加载完成后立即调用该函数时，这个参数会特别有用。

const throttledDoSomething = _.throttle(function() {
  console.log('按钮被点击了');
}, 30000, {
  leading: false
});

throttledDoSomething(); // 不会立即执行

setTimeout(function() {
  throttledDoSomething(); // 在 30000 毫秒之后执行第一次
}, 30000);

在上面的代码中，我们设定了参数 leading 为 false，这意味着在创建 throttledDoSomething 函数并调用它时，不会立即执行这个函数，而是必须等待 30000 毫秒后才会执行一次。

trailing

当 trailing 设为 false 时，表示禁止在函数被限制的时候再次调用函数。这个参数在限制滚动事件时比较有用。

const throttledDoSomething = _.throttle(function() {
  console.log('事件被触发了');
}, 30000, {
  trailing: false
});

window.addEventListener('scroll', throttledDoSomething);

在上面的代码中，我们设定了参数 trailing 为 false，这意味着在用户滚动页面的时候，虽然会不断地触发事件，但是这个函数只会在滚动停止了 30000 毫秒之后才会被触发一次。这个参数可以有效地减轻浏览器的负担。