网络技术问题 | jQuery 测验 |第 2 组 |问题 5

本测验将涉及 jQuery 的相关知识，包括选择器、DOM 操作、事件处理和特效等方面。问题难度较高，请程序员认真准备。

问题描述

以下哪种方式可以在 jQuery 中实现函数节流（throttling）？

A. 使用 setInterval 函数，指定合适的时间间隔，在函数内部判断时间是否已到。

B. 使用 setTimeout 函数，将函数放入队列中排队，等到合适的时间再执行。

C. 使用 $.throttle 函数（插件），自动实现节流的功能。

D. 使用 $.debounce 函数（插件），自动实现节流的功能。

解析

函数节流是指限制函数执行的次数，以达到节约 CPU 或网络资源的目的。在 jQuery 中，可以通过一些插件来实现函数节流。

其中，$.throttle 和 $.debounce 函数都可以实现函数节流的功能。

$.throttle 函数可以翻译为“函数限流”，它可以控制函数执行的频率，以达到节约资源的目的。具体实现方式是，在指定的时间间隔内，只允许函数执行一次，多次调用只会执行一次。

$.debounce 函数可以翻译为“函数去抖”，它可以控制函数的触发频率，当多次调用函数的时候，只有在指定的时间内没有再次调用函数时，才会执行一次。

因此，选项 C 和 D 都可以实现函数节流的功能。

参考文献

• jQuery throttle / debounce 函数

代码片段

// 使用 $.throttle 函数实现函数节流
$(window).on('scroll', $.throttle(function() {
  // 将在 100 毫秒内只被调用一次
  console.log('scroll');
}, 100));

// 使用 $.debounce 函数实现函数节流
$(window).on('resize', $.debounce(function() {
  // 将在 100 毫秒内没有连续调用时被调用，可以减少函数的触发次数
  console.log('resize');
}, 100));