JS高频面试题-节流和防抖

本文介绍了防抖和节流的原理,如何在滚动事件、搜索输入、表单验证等场景中应用,以及提供了手写代码示例。两种方法的区别在于防抖在用户停止操作后执行,节流则定期处理。根据需求选择适合的优化策略。
摘要由CSDN通过智能技术生成

一、防抖

1、防抖的原理:

当事件(如onscroll)触发后,用户可能不停的触发该事件,以最后一次触发该事件开始计算执行时间(如300ms),执行时间到后才去执行相应的回调函数。用一个线段如下图来表示:在A点第一次触发事件onscroll,开始计算执行时间;在B点再次触发事件,该点还在300ms内,重新计算执行时间;在C点再次触发事件,该点在第2个300ms以内,重新计算执行时间,到D点,第3个300ms执行时间已到,才执行回调函数。


2、防抖的应用场景:

1、滚动条scroll事件滚动,当滚动条停止滚动一段时间后才开始计算是否到达页面底部,再执行加载操作等回调函数。

2、搜索框输入查询(输入完后再发送ajax请求)

3、表单验证(表单输入完后再进行验证)

4、按钮提交事件(如果用户不停点击按钮,以最后一次点击为准)

5、浏览器窗口缩放,resize事件,当用户不再缩放窗口一段时间后,才去调用回调函数。

3、手写防抖代码:

function debounce(fn,wait){
     let timeout = null
     return function(...args){ //闭包,返回的函数暂且称为returnFunc
     if(timeout){
        clearTimeout(timeout)
     }
        timeout = setTimeout(()=>{
        //调用fn函数,并修改this指针为container而不是window,args是调用returnFunc时传递的参数
            fn.apply(this,args) 
            },wait)
         }
        }

let count = 0
const container = document.querySelector('.content')
function callbackFunc(){
    container.innerHTML = count++
  }
//这里onmousemove事件触发后,会调debounce函数返回的函数returnFunc,onmousemove事件触发后浏览器会创建并传递一个event参数,returnFunc也会接收到这个event参数
container.onmousemove = debounce(callbackFunc,2000) 

二、节流

1、节流的原理

节流是某个事件触发后,每隔一段时间才处理一次。如:当事件(如onscroll)触发后,用户可能不停的触发该事件,每隔一段时间才执行相应的回调函数。

正如上图所示,假如事件间隔是10s,在A点,也就是起点时,开始触发事件,默认调回调函数做出响应,在0-10s期间一直在触发事件,但该期间没有调回调函数,到第10s时间间隔到了才做出一次响应,10-20s区间一样也是一直触发事件但不做出响应,到20s做出一次响应。在D点(位于20-30s之间)停止触发事件,没有到时间间隔,默认不再调回调函数。

2、节流的应用场景

1、DOM元素的拖拽,比如隔一段时间,输出当前DOM元素的坐标

2、计算鼠标移动的距离,鼠标移动时,每隔一段时间鼠标移动的距离;

3、监听scroll滚动,滚动一段时间会请求数据等。

3、手写防抖函数

//这里只实现了开始时是否响应的情况(默认开始响应),尾部是否响应的情况没有实现(默认尾部不响应)
  function throttle(func, limit,{leading = true,trailing = false} = {}) {
      let startTime = 0
      return function(){
           let nowTime = new Date().getTime()
           if(!leading && startTime === 0) { //这里确保是第一次进来
              //当leading是false时,也就是不需要首次进来时执行回调函数,这是将startTime赋值成nowTime就会导致limit - (nowTime - startTime) >0 而不会执行func函数
                startTime = nowTime 
           }
           if(limit - (nowTime - startTime) <= 0){ //到了间隔时间,要开始执行函数
              func.apply(this,arguments)
              startTime = nowTime
            }
          }
        }
 let count = 0
 const container = document.querySelector('.content')
 function callbackFunc(){
    container.innerHTML = count++
 }
 container.onmousemove = throttle(callbackFunc,2000)

三、总结

防抖和节流的原理不同,导致其应用场景也不同,大家根据自身的需求来选择防抖还是节流来实现。

  • 7
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值