您的当前位置：首页>全部文章>文章详情

【JavaScript】JS防抖动方法

CrazyPanda发表于：2024-04-24 20:13:02浏览：267次TAG：

防抖动是指在事件被触发时，为了减少因为快速连续操作导致的大量事件触发，通常会设置一个延时，当事件被触发后，等待一段时间，如果在这段时间内没有新的相同事件被触发，则执行该事件的操作。

在JavaScript中，防抖动通常可以通过设置定时器来实现。当事件触发时，如果已经有一个定时器在等待，则清除它并重新设置一个新的定时器。只有当定时器到期而事件也没有被触发时，事件绑定的处理函数才会执行。

function debounce(fn, wait) {
  let timeout = null;
  return function() {
    let context = this;
    let args = arguments;
    if (timeout) clearTimeout(timeout);
    let callNow = !timeout;
    timeout = setTimeout(() => {
      timeout = null;
    }, wait);
    if (callNow) fn.apply(context, args);
  };
}

// 使用例子
window.onscroll = debounce(function() {
  console.log("滚动事件被触发了");
}, 1000);

注意事项：

debounce函数不能直接调用fn函数，因为按钮绑定的事件函数是直接调用的，所以使用返回函数，否则函数会立即执行；
每次点击先清除延时操作，clearTimeout不能清除一个没有定义的变量名，所以需要先定义一个变量timer用来清除和定义延时操作；
在函数外层定义timer，函数内部方便使用，让这些独立的执行函数有联系；
调用函数fn，容易忽略this指向，需要将this指向调用者。

猜你喜欢

: 【JavaScript】JS生成二维码-qrcode.js; 二维码又称QRCode，是一个近几年来移动设备上很流行的一种编码方式它比传统的一维码（条形码）能存更多的信息，也能表示更多的数据类型。按照一定规律排列组成的几何图形构成，它巧妙地利用构成计算机内部逻辑...; 发表于：2024-10-29 浏览：133 TAG： #二维码 #javascript

: 【Javascript】图片转base64的三种js方法; 在前端，将图片转换为Base64编码是一种常见的做法，尤其是在不需要服务器端处理图片的情况下。Base64编码允许你将图片直接嵌入到HTML或CSS中，或者在JavaScript中作为字符串传输。以下...; 发表于：2024-10-25 浏览：352 TAG： #图像 #base64

: 【JavaScript】js获取父级元素; 在JavaScript中，我们可以使用以下方法来获取元素的父级：  1、使用parentNode属性：可以通过访问元素的parentNode属性来获取其直接父级元素。例如：var element = document.getElementById('myElement'); var parentElement = element.parentNode;2、使用parentElement属性：与pa; 发表于：2024-05-11 浏览：253 TAG：

: 【JavaScript】JS获取时间并格式化; 方法一：使用JavaScript的Date对象和相关方法来获取时间并格式化var now = new Date();   // 格式化日期 var year = now.getFullYear(); var month = (now.getMonth() + 1 < 10 ? "0"&nbs; 发表于：2024-08-14 浏览：294 TAG：

: 【JavaScript】如何从 JavaScript 数组中删除重复元素？; 在 JavaScript 中，有多种方法可以从数组中删除重复元素。在本文中，我们将探讨一些删除重复元素的顶级方法。使用filter()方法filter()方法使用传递的条件创建一个新的元素数组。这将仅包含作为此过滤器方法的一部分返回 true 的元素。因此，要实现删除重复元素，我们只需在 filter() 方法中添加条件即可，它会完成剩下的工作。#过滤器.js<script>    var arr = ["stev; 发表于：2024-04-16 浏览：298 TAG：

: 【JavaScript】如何使用 layui 实现自适应; layui 是一个轻量级的现代前端框架，它提供了丰富的 UI 组件和强大的响应式功能。要使用 layui 实现自适应布局，可以按照以下步骤进行：1. 引用 layui 框架复制以下代码并将其粘贴到你的 HTML 页面中：<script src="path/to/layui.js"></script>2. 定义自适应布局的容器创建用于放置自适应内容的容器，并为其设置 layui-container 类：<div class=&q; 发表于：2024-08-08 浏览：234 TAG：

: 【Javascript】localStorage和sessionStorage的使用; 一、什么是localStorage、sessionStorage在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 二、localStorage的优势与局限localStorage的优势1、localStorage拓展了cookie的4K限制2; 发表于：2024-03-27 浏览：331 TAG： #javascript #localstorage #sessionstorage

: 【JavaScript】JS四舍五入保留两位小数(二);         在Web前端开发中，大多数的项目都是需要表单支持的，而在表单中有一种比较常见的功能是要你四舍五入保留两位小数，接下来将为大家详细的介绍一下保留两位小数的六种常用方法。1. toFixed()方法        介绍：这是JS自带的一个方法，可以四舍五入保留指定位数的小数，并且位数不够时可以自动补0        注意：保留两位小数，将数值类型的数据改变; 发表于：2024-03-12 浏览：296 TAG：

: 【JavaScript】JS时间和时间戳互转; 在JavaScript中，获取当前时间的时间戳（秒值）可以使用 Date.now() 方法，而将时间戳转换为日期格式可以使用 Date 对象。获取当前时间戳（秒值）：let timestampSeconds = Date.now() / 1000; console.log(timestampSeconds); // 输出的是以秒为单位的时间戳将时间戳转换为日期：let timestampSeconds =&; 发表于：2024-08-14 浏览：258 TAG：

: 【JavaScript】javascript中doucument对象的属性和方法有哪些; doucument对象的属性和方法有：body、cookie、domain、lastmodified、referrer、title、close()、open()、write()、getelementbyid()、normalize()等等。本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。Document 对象每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。; 发表于：2024-04-14 浏览：276 TAG：

栏目分类全部>

推荐文章

