防抖和节流的方法详解和CSS文本溢出小知识
1.防抖
防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时
场景:搜索框输入发请求,一些拖拽盒子,或者滚动事件
防抖的实现:利用间歇函数
const timer =setTimeout(callback函数,间隔时间) //执行完会返回自身的这个定时器的编号
//事件所触发的函数
clickFn(){
//先清除timer对应的定时器
clearTimeout(this.timer)
//从新启动一个延时器,并把timeID赋值给this.timer
this.timer = setTimeout(() =>{
//如果500ms内没有触发这个的事件,就做你要做的事。要是触发的话,定时器就会被上一句代码清除,也就会重新计时
。。。。。。。。如发请求等事情,滚动事件等事件的执行
},500)
}
2.节流
作用:防止事件连续不停的进行,一个一个的处理,是间隔时间执行,一些高频事件,在被连续触发时,需要限定在单位时间内只执行一次;例如:防止发起多次请求或者按键的连续点击