【JavaScript】JS防抖动方法
CrazyPanda发表于：2024-04-24 20:13:02浏览：275次
防抖动是指在事件被触发时，为了减少因为快速连续操作导致的大量事件触发，通常会设置一个延时，当事件被触发后，等待一段时间，如果在这段时间内没有新的相同事件被触发，则执行该事件的操作。
在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复制剪切神器clipboard.js基本使用
- clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中 clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;
- 【JavaScript】如何使用 layui 实现自适应
- layui 是一个轻量级的现代前端框架，它提供了丰富的 UI 组件和强大的响应式功能。要使用 layui 实现自适应布局，可以按照以下步骤进行：1. 引用 layui 框架复制以下代码并将其粘贴到你的 HTML 页面中：<script src="path/to/layui.js"></script>2. 定义自适应布局的容器创建用于放置自适应内容的容器，并为其设置 layui-container 类：<div class=&q
- 【JavaScript】JS防抖动方法
- 防抖动是指在事件被触发时，为了减少因为快速连续操作导致的大量事件触发，通常会设置一个延时，当事件被触发后，等待一段时间，如果在这段时间内没有新的相同事件被触发，则执行该事件的操作。在JavaScript中，防抖动通常可以通过设置定时器来实现。当事件触发时，如果已经有一个定时器在等待，则清除它并重新设置一个新的定时器。只有当定时器到期而事件也没有被触发时，事件绑定的处理函数才会执行。function debounce(fn, wait) { l
- 【JavaScript】JS中referer的使用
- HTTP请求中有一个referer的报文头，用来指明当前流量的来源参考页。例如在www.sina.com.cn/sports/上点击一个链接到达cctv.com首页，那么就referrer就是www.sina.com.cn/sports/了。在Javascript中，我们可以通过document.referrer来获取同样的信息。通过这个信息，我们就可以知道访客是从什么渠道来到当前页面的。这对于Web Analytics来说，是非常重要的，这可以告诉我们不同渠道带来的流量的分布情况，还有用户搜索
- 【JavaScript】JS获取时间戳秒值
- 方法一：使用JavaScript的Date对象的getTime()方法来获取当前时间的毫秒值，然后将其除以1000得到秒值。var timestamp = Math.floor(new Date().getTime() / 1000);方法二：使用JavaScript的Date对象的getTime()方法获取当前的毫秒值，然后使用Math.floor()函数向下取整得到秒值。var timestamp =
- 【JavaScript】JS时间和时间戳互转
- 在JavaScript中，获取当前时间的时间戳（秒值）可以使用 Date.now() 方法，而将时间戳转换为日期格式可以使用 Date 对象。获取当前时间戳（秒值）：let timestampSeconds = Date.now() / 1000; console.log(timestampSeconds); // 输出的是以秒为单位的时间戳将时间戳转换为日期：let timestampSeconds =&
- 【JavaScript】js获取父级元素
- 在JavaScript中，我们可以使用以下方法来获取元素的父级： 1、 使用parentNode属性：可以通过访问元素的parentNode属性来获取其直接父级元素。例如：var element = document.getElementById('myElement'); var parentElement = element.parentNode;2、 使用parentElement属性：与pa
- 【Javascript】localStorage和sessionStorage的使用
- 一、什么是localStorage、sessionStorage在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 二、localStorage的优势与局限localStorage的优势1、localStorage拓展了cookie的4K限制2
栏目分类全部>