JS防抖和节流,你真的搞清楚了吗?

很多时候,我们都会觉得防抖和节流是一回事,其实不然,他们还是有很大区别的。

首先说防抖,当一个按钮,你拼命点击,我就不处理,等你什么时候消停了,我取你最后一次点击作为有效的,然后请求后台接口,这个就是防抖。

实际开发中,我们直接使用 lodash 的 debounce 函数来实现防抖。

// 例如,下面是一个带有搜索框的页面,并且需要在用户停止输入 500 毫秒后才开始搜索:
function search(keyword) {
  // 根据关键词进行搜索
  console.log(`Searching for '${keyword}'...`)
}

const inputEl = document.getElementById('search-input');

// 创建 debounce 函数,最多每 500 毫秒执行一次 search 函数
const debouncedSearch = _.debounce(search, 500);

// 监听 input 变化,如果有变化则调用 debouncedSearch 函数
// 每当出现输入变化时,我们会将输入内容传递给 `debouncedSearch` 函数,这个函数会将搜索操作延迟 500 毫秒后执行。因此,只有用户停止输入 500 毫秒之后,才会真正执行搜索操作
inputEl.addEventListener('input', (evt) => {
  const keyword = evt.target.value.trim();
  debouncedSearch(keyword);
});

再来说节流,比如我有一个拖拽的div,我希望每当拖拽发生时,要时刻获取div的XY轴的坐标,比如叫做getPosition函数。因为浏览器的运行速度是极快的,当拖拽发生时,就会过于频繁的触发,这样就很浪费性能,也没必要。

于是,我们希望每隔100ms就触发一次,而不是时刻都在触发,这种有节奏的触发,就是节流。

节流函数可以限制一个函数在一定时间范围内最多执行一次。也就是说,如果同一个函数在短时间内多次触发,这个函数只会以固定的频率执行。

实际开发中,我们直接使用 lodash 的 throttle 函数来实现节流。

// 例如,下面是一个点击按钮时,最多每隔 1 秒输出一次 log 的示例:
function log() {
  console.log('Clicked!');
}

const btnEl = document.getElementById('click-button');

// 创建 throttle 函数,最多每 1 秒执行一次 log 函数
const throttledLog = _.throttle(log, 1000);

// 监听 click 事件,如果有点击则调用 throttledLog 函数
// 每当用户点击按钮时,我们会调用 `throttledLog` 函数,这个函数会通过限制函数的执行频率,保证每隔 1 秒钟输出一条日志。即使用户连续点击按钮,也只有第一次点击可以触发函数的执行,后续的点击都会被忽略
btnEl.addEventListener('click', (evt) => {
  throttledLog();
});

所以,防抖和节流看似很像,很多人以为是一回事,其实不然。

原创文章,作者:guozi,如若转载,请注明出处:https://www.sudun.com/ask/90948.html

(0)
guozi的头像guozi
上一篇 2024年6月7日 下午1:39
下一篇 2024年6月7日 下午1:42

相关推荐

  • 服务器一年多少钱

    想必大家在日常生活中都会听到关于云服务器的名词,但是对于什么是云服务器,以及它的优势和特点,可能并不是很了解。而随着云计算技术的发展,云服务器也越来越多地被应用于各行各业。那么问题…

    行业资讯 2024年4月19日
    0
  • 百度竞价被点击软件盯上

    百度竞价,这个让企业主和广告主们欣喜若狂的网络行业,却也引来了一些不为人知的隐患。近日,一款神秘的点击软件悄然兴起,它不仅能够影响百度竞价的排名,还能够对广告主和用户产生巨大的影响…

    行业资讯 2024年3月28日
    0
  • 域名被墙怎么恢复,域名被墙会自动恢复吗

    接下来,您可以参考可信的网站,包括政府机构和知名科技媒体发布的相关信息。这些网站通常会提供可靠且准确的解决方案,并可以帮助您更好地了解您的计算机域名被阻止的原因。 3.查看用户评价…

    行业资讯 2024年5月14日
    0
  • 东莞idc是什么?

    你是否听说过东莞IDC?它是什么?今天,我们将揭开这个神秘的面纱,来探究IDC的真实面目。什么是IDC?它的发展历史又是怎样的?它提供哪些服务,又有着怎样的特点?而它的价格标准又是…

    行业资讯 2024年4月13日
    0

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注