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's avatarguozi
上一篇 2024年6月7日 下午1:39
下一篇 2024年6月7日 下午1:42

相关推荐

  • 无dns怎么解决,无dns是什么意思

    从事互联网行业的人都应该知道DNS污染对一台服务器的影响有多大。然而,从众多可用服务器中选择一个没有DNS污染的服务器是一件令人头疼的事情。今天我们就来详细探讨一下这个话题,揭示什…

    行业资讯 2024年5月6日
    0
  • 怎么投诉恶意网站,怎么投诉被屏蔽的网站信息

    您是否曾经访问过某个网站,却发现自己无法打开该页面?这可能是因为该网站被阻止了。那么,为什么网站会被屏蔽呢?我怎样才能知道网站是否被屏蔽了?如果我发现我的网站被屏蔽了,我应该如何提…

    行业资讯 2024年5月10日
    0
  • 快速办公技能点get√

    “  为什么别人的工作效率这么高?  ” “  而我总是比别人慢,还做的没别人好  ” 那就继续看下去 也许你会获得更多的提升方法 本次介绍…

    2024年4月2日
    0
  • 天津哪家网站优化公司好?

    天津哪家网站优化公司好?作为一个网站主,你是否也在苦恼着这个问题?什么是网站优化?为什么要进行网站优化?如何选择一家适合自己的天津网站优化公司?今天,我们就来揭秘这些问题。通过下面…

    行业资讯 2024年4月14日
    0

发表回复

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