前端面试常考|节流与防抖-创新互联

文章目录

• 一. 防抖
• • • 1. 什么是防抖
    • 2. 常见应用场景
    • 3. 代码实现思路
• 二. 节流
• • • 1. 什么是防抖
    • 2. 常见应用场景
    • 3. 代码实现思路
• 三. 面试总结
• • • 1. 防抖
    • 2. 节流

成都创新互联公司自成立以来，一直致力于为企业提供从网站策划、网站设计、成都网站设计、网站制作、电子商务、网站推广、网站优化到为企业提供个性化软件开发等基于互联网的全面整合营销服务。公司拥有丰富的网站建设和互联网应用系统开发管理经验、成熟的应用系统解决方案、优秀的网站开发工程师团队及专业的网站设计师团队。

---

一. 防抖 1. 什么是防抖

所谓的防抖就是指连续触发事件但是在设定的一段时间内中只执行最后一次。
例如：设定1000毫秒执行，当你触发事件了，他会1000毫秒后执行，但是在还剩500毫秒的时候你又触发了事件，那就会重新开始1000毫秒之后再执行。

2. 常见应用场景

1. 搜索框搜索输入
在我们在所搜框输入时，不能每次输入都触发一次请求，这样会非常的消耗系统性能，那么这时就可以用到防抖。
2.文本编辑器实时保存
在文本编辑器实时保存的应用场景下，不需要用户每次输入都进行一次保存，而是可以设置一个时间，多长时间后再去进行一个自动保存。

3. 代码实现思路

如果面试官问我们防抖的代码实现思路，那么我们可以回答利用定时器。
如下例子:

let timerId = null;
document.queryselector('.ipt').onkeyup= function (){if (timerId !=null){clearTimeout(timerId)
	}
	timerId = setTimeout(()=
	console.1og('我是防抖')
	},1000)
}

在我们的实际开发中除了可以自己进行手写还可以使用lodash进行实现，相关技术各位读者朋友可以自行查阅相关文章。

二. 节流 1. 什么是防抖

就是指连续触发事件但是在设定的一段时间内中只执行一次函数。
例如：设定1000毫秒执行，那你在1000毫秒触发在多次，也只在1000毫秒后执行一次。

2. 常见应用场景

节流的引用场景比较多常见的有：
1.高频事件例如快速点击、鼠标滑动、resize事件、scroll事件
对于这类高频的事件，我们可以设置一个时间，在设定事件内不管触发多少次事件都不会触发相应的业务逻辑代码，只有这段时间结束后再进行下一轮执行
2. 下拉加载 视屏播放记录时间
对于这一类，我们也可以设置一个时间，设定多少秒记录一次，这样就不会过多的损耗我们系统的性能。

3. 代码实现思路

如果面试官问我们防抖的代码实现思路，那么我们可以回答利用定时器。
如下例子:

let timerId = null;
document.queryselector('.ipt').onmouseover= function (){if (timerId !=null){return
	}
	timerId setTimeout(()=>{console.log('我是节流)
	timerId = null
   },100)
}

在开发中对于节流除了我们手写也可以使用lodash进行实现，相关技术各位读者朋友可以自行查阅相关文章。

三. 面试总结 1. 防抖

单位时间内，频繁触发事件，只执行最后一次。

2. 节流

单位时间内，频繁触发事件，只执行一次。

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧

网站栏目：前端面试常考|节流与防抖-创新互联
文章分享：http://wjwzjz.com/article/iidpc.html