面试题1-防抖节流

背景

关于节流与防抖,网络上有很多相关的文章,没次忘记每次都要去查,并且很多在描述的时候都是直接说的应用场景,
并没有很明确、一眼就能告诉你这是什么(what),而是直接告诉你应用场景,和代码,需要自己去梳理,
之前面试过一位同学,问到这个问题的时候他也有这样的毛病,直接告诉你什么应用场景,➕怎么实现,
且回答的思路不是很清晰,所以打算自己梳理一遍写一篇

防抖与节流是什么(概念)

准确的来说,节流与防抖是用来规定函数执行频率的方法,主要是用来规定(降低)连续执行函数的频率;

防抖

在我们规定的时间内,重复触发,只执行最后一次

节流

以我们规定的时间为周期,周期性的执行

实现

防抖
 function debounce(fn) {
   let timer = null;
   return () => {
    clearTimeout(timer);
     timer = setTimeout(() => {
      fn()
    }, 500)
   }
}
节流
function throttle(fn) {
  let timer = null;
  return () => {
    if (!timer) {
      timer = setTimeout(() => {
        fn()
        timer = null;
      }, 1000)
    }
  }
}

应用场景就不多说了,大家应该都知道,只要是触发频率较高,或者两次间隔太过相近,都可以使用,具体怎么使用,看大家实际场景

### 关于 Vue.js 面试题中的防抖节流 #### 一、防抖函数实现与原理 防抖的核心在于延迟执行某个操作,直到一定时间内不再触发该事件才会执行回调。以下是基于 JavaScript 的简单防抖函数实现: ```javascript function debounce(func, wait) { let timeout; return function(...args) { const context = this; // 解决this指向问题 clearTimeout(timeout); // 清除之前的定时器 timeout = setTimeout(() => func.apply(context, args), wait); }; } ``` 此代码片段解决了 `this` 指向问题[^1],并允许传递额外参数给原函数。 #### 二、节流函数实现与原理 节流则是控制某段时间内只允许执行一次特定的操作。下面是一个简单的节流函数实现: ```javascript function throttle(func, limit) { let inThrottle; return function (...args) { const context = this; // 同样解决this指向问题 if (!inThrottle) { inThrottle = true; func.apply(context, args); setTimeout(() => (inThrottle = false), limit); } }; } ``` 这段代码确保了在指定的时间间隔内只会调用一次函数[^4]。 #### 三、Vue 中的应用场景 在 Vue.js 开发中,常见的应用场景包括输入框的实时搜索功能、窗口大小调整监听等。例如,在组件的方法中定义一个防抖处理程序可以有效减少不必要的渲染次数: ```javascript export default { data() { return { searchQuery: '' }; }, methods: { handleSearchDebounced: debounce(function(event) { console.log('实际查询:', event.target.value); }, 500), onInputChange(event) { this.handleSearchDebounced(event); } } }; ``` 这里展示了如何利用自定义的防抖函数来优化用户的输入体验[^2]。 对于节流而言,它通常用于防止频繁触发某些昂贵的操作,比如滚动或者拖拽事件。同样可以在 Vue 方法里这样写: ```javascript methods: { handleScrollThrottled: throttle(function() { console.log('页面被滚动'); }, 300) }, mounted() { window.addEventListener('scroll', this.handleScrollThrottled); }, beforeDestroy() { window.removeEventListener('scroll', this.handleScrollThrottled); } ``` 以上例子说明了如何绑定带有节流效果的事件监听器到全局对象上,并记得清理它们以避免内存泄漏[^3]。 #### 四、推荐使用的第三方库 考虑到生产环境下的复杂需求,建议使用成熟的工具库如 Lodash 提供的功能更完善的版本。可以通过如下方式快速集成至项目当中: ```bash npm install lodash ``` 之后就可以很方便地引用其内置方法来进行开发工作了。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值