js的节流与防抖

简介: js的节流与防抖

JS的节流和防抖都是为了解决一些高频触发的问题,比如滚动、拖拽、输入框输入等等。

节流(Throttle): 执行一次后,一段时间内不接受第二次请求,直到这段时间过去。比如说,一段时间内,最多只能发一次请求。

实现方式:在一定时间内,只执行一次事件。

function throttle(fn, wait) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    if (!timer) {
      timer = setTimeout(function() {
        fn.apply(context, args);
        timer = null;
      }, wait);
    }
  };
}

防抖(Debounce):当持续触发事件时,一定时间内没有再触发事件,事件处理函数才会执行一次,如果在这段时间内又触发了事件,就重新开始计时。比如说,我们在输入框输入文字时,如果没有做防抖处理,每次输入文字都会触发事件,这样会非常影响性能。

实现方式:设置一个计时器,在一定时间段内,如果事件没有被触发,就执行事件。

function debounce(fn, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function() {
      fn.apply(context, args);
      timer = null;
    }, delay);
  };
}
相关文章
|
4月前
|
JavaScript
JS封装节流函数
JS封装节流函数
42 0
|
3月前
|
前端开发 JavaScript Java
【JavaScript】JavaScript 防抖与节流:以游戏智慧解锁实战奥秘
【JavaScript】JavaScript 防抖与节流:以游戏智慧解锁实战奥秘
43 3
|
3月前
|
JavaScript 前端开发 UED
深入理解JavaScript中的节流与防抖技术
理解并合理运用节流与防抖技术,可以帮助我们优化事件处理函数的执行频率,从而提升应用的性能和用户体验。这两种技术通过减少不必要的计算和DOM操作,使得Web应用程序能够更加流畅地运行。 通过掌握防抖和节流的实现原理及应用场景,开发者可以更加灵活地编写高效且性能优化的代码,对于面对高频事件处理时尤其重要。在开发中合理选择使用防抖或节流,将直接影响到应用的响应性和效率。
34 1
|
20天前
|
JavaScript 前端开发 UED
JS 防抖与节流
防抖和节流是优化高频事件处理的技术。针对如`scroll`、`resize`等频繁触发的事件,它们能有效减少不必要的回调执行,节省资源。防抖确保在一段时间内仅执行最后一次操作,适用于输入框自动补全等场景;而节流则按固定间隔执行函数,适合拖拽、滚动事件。通过简单的JavaScript实现,可以显著提升应用性能和用户体验。
24 1
JS 防抖与节流
|
4月前
|
JavaScript 前端开发 UED
js的防抖节流
js的防抖节流
27 1
|
4月前
|
JavaScript 前端开发 UED
js的节流
js的节流
25 0
|
4月前
|
测试技术
js_防抖与节流(闭包的使用)
js_防抖与节流(闭包的使用)
39 0
|
4月前
|
JavaScript
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
65 2
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
59 4