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);
  };
}
相关文章
|
1月前
|
JavaScript
JS中防抖和节流的区别是什么
JS中防抖和节流的区别是什么
16 0
|
1月前
|
JavaScript 前端开发 UED
【面试题】面试官:说说你对js中的 防抖 和 节流 的理解
【面试题】面试官:说说你对js中的 防抖 和 节流 的理解
|
1天前
|
前端开发 JavaScript UED
【JavaScript】面试手撕防抖
防抖: 首先它是常见的性能优化技术,主要用于处理频繁触发的浏览器事件,如窗口大小变化、滚动事件、输入框内容改变等。在用户连续快速地触发同一事件时,防抖机制会确保相关回调函数在一个时间间隔内只会被执行一次。
11 0
|
28天前
|
JavaScript 前端开发
js的节流和防抖
js的节流和防抖
12 0
|
28天前
|
JavaScript 前端开发 UED
|
1月前
|
JavaScript 前端开发 UED
JavaScript:节流&防抖
JavaScript:节流&防抖
24 1
|
1月前
|
JavaScript 前端开发 搜索推荐
面试官:请说说JS中的防抖和节流
面试官:请说说JS中的防抖和节流
|
26天前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
16 0
|
26天前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
47 0
|
7天前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
23 1

相关产品

  • 云迁移中心