【温故而知新】JavaScript的防抖与节流

一、概念

JavaScript中的防抖(debounce)和节流(throttle)是用于控制函数执行频率的技术。

  1. 防抖:当一个事件连续触发时,防抖技术将只执行最后一次触发事件的函数调用。换句话说,只有在停止触发事件一段时间后,才会执行函数。(即:n秒后再执行该事件,若在n秒内被重复触发,则重新计时)

使用防抖的场景:

  • 搜索框输入联想:用户在输入时,如果一直输入,会频繁触发搜索请求,使用防抖可以减少请求的次数,只在用户停止输入后才发送请求。
  • 页面滚动加载更多:当用户滚动页面时,会频繁触发加载更多数据的函数,使用防抖可以减少请求的次数,只在用户停止滚动后才发送请求。

以下是一个使用防抖的示例代码:

javascript 复制代码
function debounce(func, wait) {  
  let timeout;  
  return function() {  
    const context = this;  
    const args = arguments;  
    clearTimeout(timeout);  
    timeout = setTimeout(function() {  
      func.apply(context, args);  
    }, wait);  
  };  
}

使用示例

javascript 复制代码
const input = document.querySelector('input');  
input.addEventListener('input', debounce(function() {  
  console.log('Input value:', input.value);  
}, 200));
  1. 节流:当一个事件连续触发时,节流技术会限制函数的执行频率。换句话说,函数在一段时间内只会执行一次。(即:n秒内只运行一次,若在n秒内重复触发,只有一次生效)

使用节流的场景:

  • 页面滚动事件:当用户滚动页面时,会触发滚动事件,如果不使用节流技术,可能会导致页面卡顿。使用节流可以限制滚动事件的触发频率,减少卡顿现象。

以下是一个使用节流的示例代码:

javascript 复制代码
function throttle(func, limit) {  
  let inThrottle;  
  return function() {  
    const context = this;  
    const args = arguments;  
    if (!inThrottle) {  
      func.apply(context, args);  
      inThrottle = true;  
      setTimeout(function() {  
        inThrottle = false;  
      }, limit);  
    }  
  };  
}

使用示例

javascript 复制代码
const input = document.querySelector('input');  
input.addEventListener('input', throttle(function() {  
  console.log('Input value:', input.value);  
}, 200));

无论是防抖还是节流,都可以通过传递一个延迟时间参数来控制函数的执行频率。在实际应用中,根据具体需求选择使用防抖还是节流技术。

二、区别

防抖和节流都是用于控制函数执行频率的技术,但它们的实现方式和效果有一些区别。

区别如下:

  1. 触发时刻:
  • 防抖:只有在事件停止触发一段时间后,才会执行函数。
  • 节流:在一段时间内只会执行一次函数。
  1. 执行次数:
  • 防抖:只会执行最后一次触发事件的函数调用。
  • 节流:在一段时间内只会执行一次函数调用。
  1. 实现方式:
  • 防抖:在事件触发后设置一个定时器,在定时器延迟时间内没有再次触发事件,则执行函数。
  • 节流:在事件触发时设置一个定时器,在定时器延迟时间内触发事件则不执行函数。只有当定时器执行完毕后,才能再次触发执行函数。

使用场景:

  • 防抖:适用于连续事件触发的情况,如搜索框输入、滚动加载更多等。
  • 节流:适用于高频率事件触发的情况,如页面滚动、鼠标移动等。

根据具体的需求,选择使用防抖或节流技术可以有效地控制函数的执行频率,提升用户体验和性能。

三、优缺点

JavaScript的防抖和节流都是优化高频率触发的事件或函数调用的技术,但它们的使用场景和优缺点略有不同。

防抖的优点:

  • 减少不必要的操作:防抖能够确保在连续触发事件时,只执行最后一次操作,避免了频繁执行操作带来的性能浪费。
  • 优化用户体验:在一些需要用户等待的操作中,防抖可以避免频繁触发操作导致的界面卡顿,提高用户体验。

防抖的缺点:

  • 可能会错过一些操作:如果事件触发频率过高,防抖可能会忽略掉一些操作,导致一些必要的操作没有执行。
  • 不适合所有场景:防抖只适合在连续触发事件时使用,对于一些非连续触发的事件,使用防抖可能并不合适。

节流的优点:

  • 控制操作频率:节流能够确保在一定时间内只执行一次操作,避免了频繁执行操作带来的性能浪费。
  • 适合各种场景:节流适用于各种场景,无论是连续触发的事件还是非连续触发的事件,都可以使用节流来优化性能。

节流的缺点:

  • 可能会漏掉一些操作:如果事件的触发频率非常高,节流可能会导致一些必要的操作被忽略掉。
  • 需要合理设置时间间隔:节流的时间间隔需要根据实际情况进行调整,如果时间间隔设置过长,可能会导致性能问题;如果时间间隔设置过短,则可能会导致频繁触发事件时无法及时处理。

四、后记

JavaScript是一种广泛应用于网页开发的脚本语言,它可以用来为网页添加交互性和动态特效。JavaScript可以在网页中直接嵌入,也可以作为外部文件引用。

以下是JavaScript的一些重要特点和用法:

  1. 脚本语言:JavaScript是一种解释型脚本语言,不需要编译,可以直接在浏览器中执行。
  2. 弱类型语言:JavaScript是一种弱类型语言,变量的数据类型可以随时改变,不需要声明变量的类型。
  3. 事件驱动:JavaScript可以通过监听用户的操作或者其他事件触发特定的代码执行,实现网页的交互性。
  4. DOM操作:JavaScript可以通过文档对象模型(DOM)来操作网页的HTML元素,可以动态地添加、修改和删除元素。
  5. 表单验证:JavaScript可以通过表单验证来确保用户输入的数据符合要求,提供更好的用户体验。
  6. AJAX:JavaScript可以通过AJAX技术实现网页的异步加载,可以在不刷新整个页面的情况下更新部分内容。
  7. JSON:JavaScript Object Notation(JSON)是一种轻量级的数据交换格式,JavaScript可以很方便地解析和生成JSON数据。
  8. 库和框架:JavaScript拥有丰富的库和框架,如jQuery、React、Angular等,可以简化开发过程并提供更强大的功能。

JavaScript是一种强大且灵活的语言,可以用来创建复杂的交互式网页,并且可以与HTML和CSS无缝配合,实现出色的用户体验。

五、热门文章

【温故而知新】JavaScript的Document对象
【温故而知新】JavaScript的BOM之Screen/Location/History对象
【温故而知新】JavaScript的BOM之Navigator对象
【温故而知新】JavaScript的BOM之Window对象
【温故而知新】JavaScript数据结构详解
【温故而知新】JavaScript数据类型
RESTful API,如何构建 web 应用程序
jQuery实现轮播图代码
vue实现文本上下循环滚动
Vue运用之input本地上传文件,实现传参file:(binary)
js判断各种浏览器
uni-app详解、开发步骤、案例代码

相关推荐
zhougl99625 分钟前
html处理Base文件流
linux·前端·html
花花鱼29 分钟前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_32 分钟前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)2 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之3 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端3 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木5 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!5 小时前
优选算法系列(5.位运算)
java·前端·c++·算法