高频面试题—“什么是防抖节流？”
Posted 小hu同学
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了高频面试题—“什么是防抖节流？”相关的知识，希望对你有一定的参考价值。
防抖：用户触发事件过于频繁，只要最后一次事件的操作
节流：控制高频的执行次数
什么是防抖？
防抖：用户触发时间过于频繁，只要最后一次事件的操作
案例：我在输入框中输入了 123 但是控制台打印出来的 是 1 12 123
测试代码
<body>
<input type="text">
<script>
<!--获取input标签 -->
let ip = document.querySelector("input")
<!--oninput输入就触发 -->
ip.oninput = function() {
console.log(this.value);
}
</script>
</body>
解决以上的频繁触发的操作
//获取input标签
let ip = document.querySelector("input");
//声明一个变量 给它赋值为null 空
let nat = null;
// oninput输入就触发
ip.oninput = function() {
//判断这个变量是否是为空的
//不为空了就执行里面的事件函数
if( nat !==null){
clearTimeout(nat)
}
//利用定时器，输入间隔为0.5秒
nat = setTimeout(() =>{
console.log(this.value)
},500)
}
思路：
如果这个ip.oninput事件被触发了，如果是最后一次就直接执行setTimout这个计时器的操作，如果不是最后一次，就执行clearTimout清除掉之前的
防抖代码的优化(封装)
刚刚虽然我们实现了防抖的功能，但是代码是比较难看的，需要在这个基础上 ，进行代码的优化。这里我们需要使用闭包去进行封装它
第一步：
//创建一个闭包 ab
function ab(){
//将之前的事件函数放在闭包 ab的内部函数里面
function(){
//判断这个变量是否是为空的
//不为空了就执行里面的事件函数
if( nat !==null){
clearTimeout(nat)
}
//利用定时器，输入间隔为0.5秒
nat = setTimeout(() =>{
console.log(this.value)
},500)
}
}
第二步：
//获取input标签 赋值给变量 ip
let ip = document.querySelector("input");
ip.oninput = ab(function() {
//这个是业务逻辑，打印this.value
//这里的this 指向的是Windows
console.log(this.value);
//定时器
},500)
第三步：
let ip = document.querySelector("input");
ip.oninput = ab(function() {
console.log(this.value);
},500)
//利用闭包来封装函数
//在这个函数中需要传递参数
//fn :是真正的业务逻辑，在调用的时候要传递到上面的事件中
//on :是计时器的时间
function ab( fn,on) {
let t = null;
//要吧这个函数return出去
return function() {
//判断这个变量是否是为空的
//不为空了就执行里面的事件函数
if( t !==null){
//清空这个事件函数
clearTimeout(t)
}
//利用定时器，输入间隔为0.5秒
t = setTimeout(() =>{
//上面我们说到了，在oninput的事件中this的指向是指向的Windows对象
//这个函数里面的this 是指向的input这个属性
//console.log(this) 可以实践一下
//当我们如果使用 fn()直接去调用的话，打印出来的会是undefined
//这个地方，就要使用call方法，去改变这个this的指向了
//call（this）:让当前fn指向当前的this
fn.call(this)
},on)
}
}
一样的，效果也能出现，在输入框输入后只会出现最后一个
什么是节流？
节流的意思：控制执行的次数
案例详情：
代码：
<style>
body{
height: 3000px;
}
</style>
<body>
<script>
window.onscroll =function(){
console.log(1);
}
</script>
滚动了短短的一定距离，就发送了100多次，这样会大大降低性能
需求：我们现在要减少执行的次数
代码：
let ab = true;
windows.onscroll = function(){
if(ab){
setTimeout(()=>{
console.log(1)
//所以这里需要将 ab 改为true
ab =true;
},500)
}
//将ab 改为false 就不执行这个函数了
ab = false;
}
节流代码的优化（封装）
节流的封装跟防抖的封装是差不多的
window.onscroll = throttle (function(){
console.log(1)
},500)
function throttle (fn,delay){
let ab = true;
return function(){
if(ab){
setTimeout(()=>{
fn.call(this)
//所以这里需要将 ab 改为true
ab =true;
},delay)
}
//将ab 改为false 就不执行这个函数了
ab = false;
}
}
两个的效果都是一样的
可以看到我滚到最下面后，也只请求了10次，这样大大的减少了请求次数
关注我，查看更多相关知识喔~
以上是关于高频面试题—“什么是防抖节流？”的主要内容，如果未能解决你的问题，请参考以下文章