防抖和节流。

本文介绍了防抖和节流两种技术,它们用于控制函数在一定时间内的触发次数,减少请求频率,提升性能。通过闭包实现,防抖在延迟时间内只执行最后一次操作,而节流则规定时间内只执行一次。文中还提及了防抖和节流的代码实现以及它们在登录验证、滚动事件等场景的应用。
摘要由CSDN通过智能技术生成

0、基础介绍

介绍:

  • 防抖(Debounce)和节流(Throttle)都是用来控制某个函数在一定时间内的触发次数.
  • 作用:减少触发频率提高性能或者说避免资源浪费

区别:

  • 防抖 (多次触发 只执行最后一次
  • 节流 (规定时间内 只触发一次

1、什么是防抖和节流?

防抖:

        (1)防抖:防抖的含义是指在一定的时间内,多次触发同一个事件,只执行最后一次操作。比如:当我们搜索框中输入关键字或词时,输入框不断触发oninput事件,如果每次输入都去请求服务器获取数据,会造成不必要的请求浪费。此时就可以使用防抖技术,将一定时间内的多次触发合并成一次操作,只请求一次服务器数据,减少了请求次数和服务器负载。

节流:

        (2)节流:节流的含义是指在一定时间内,多次触发同一个事件,只执行第一次操作。例如,当我们拖动网页上的滚动条时,会不断出发onscroll事件,如果每次触发都去计算滚动距离,会造成浏览器性能下降。此时就可以使用节流技术,将一定时间内的多次触发限制为一次操作,只计算一次滚动距离,提高了浏览器性能和用户体验。

 2、防抖和节流的代码:

防抖:

        在防抖函数中,我们使用了闭包来保存定时器变量timer和传入的函数func。每次触发事件时,我们先清除之前的定时器,再设置一个新的定时器。如果在delay时间内再次触发事件,就会清除之前的定时器并设置一个顶的定时器,知道delay时间内不再触发事件,定时器到达时间后执行传入的函数func。

function debounce(func, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 使用防抖优化搜索框输入
const searchInput = document.getElementById('search-input');
const searchBtn = document.getElementById('search-btn');
function search() {
  console.log('searching...');
  // 发送请求获取搜索结果
}
searchInput.addEventListener('input', debounce(search, 500));
searchBtn.addEventListener('click', search);

 

防抖执行流程

节流:

        在节流函数中,我们同样使用了闭包来保存定时器变量timer和传入的函数func。每次触发事件时,如果定时器不存在,就设置一个定时器,并在delay时间后执行传入的函数func。如果在delay时间内再次触发事件,由于定时器还存在,就不会执行传入的函数func。只有在delay时间后定时器到达时间后执行传入的函数func并清除定时器。

        在实际开发中,我们可以根据具体的情况选择使用防抖或节流来优化性能,以提高用户体验和应用性能。

function throttle(func, delay) {
  let timer = null;
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, delay);
    }
  };
}

// 使用节流优化滚动事件
window.addEventListener('scroll', throttle(function() {
  console.log('scrolling...');
  // 计算滚动距离
}, 500));

节流执行流程

 3、防抖节流的第三方库

        目前防抖节流的第三方库有 lodash 、underscore

 4、应用场景:

        防抖:登录、短信验证等按钮避免用户点击太快,发行多次请求;调整浏览器窗口大小时,resize 次数过于频繁,计算过多,造成页面卡顿的情况;文本编辑器实时保存;搜索框等。

        节流: 鼠标连续不断地触发某事件(如点击事件),单位时间内只触发一次;监听滚动事件,例如:懒加载;每隔多少秒计算一次相关数据。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值