- 2021-01-02
前段时间学到了几个知识点~ 一块整理出来好了,现在多发一点给以后备用hh
一、js中的函数防抖
1. 什么是函数防抖
函数防抖(debounce)就是指触发事件后,在n秒内函数只能执行一次,如果事件在n秒内后被触发了一次,则重新计算函数执行时间。
2. 为什么需要函数防抖
前端事件中(如onresize,scroll,mousemove,mousehover等)会被频繁触发,不做限制可能一秒之内执行几十上百次,如果在这些函数内部执行了其他方法,尤其是操作了DOM元素,那么不仅浪费计算机资源,还会降低程序运行速度,甚至会造成浏览器卡死,崩溃。
另外,重复调用ajax不仅会造成数据关系的混乱,还会造成网络拥趸,增加服务器压力。
3. 防抖的应用场景
- 用户在输入框中连续输入一段字符串,只在输入完成后去执行最后一次的ajax请求,可以有效节约请求次数。
- window的resize,scroll事件,防抖指让其触发一次
4. 防抖的实现原理
防抖函数的要点,是需要一个setTimeout来辅助实现,延迟运行需要执行的代码,如果方法再次触发,则把上次记录的延迟执行代码清除掉,重新开始计时,若计时期间事件没有被重新触发,等延迟时间计时完毕,则执行目标代码。
5. 防抖的代码实现
function debounce(fn, wait){
var timer = null;
return function(){
if(timer !== null){
clearTimeout( timer );
}
timer = setTimeout(fn, wait);
}
}
function func(){
console.log("执行方法");
}
window.addEventListener('resize', debounce(func, 1000));
二、js中的节流
1. 节流和防抖的区别
实用防抖的结果是,在限定时间内,不断触发事件,理论上就永远不会执行后续的方法。
而防抖则是,计时不断触发事件,也能在某个时间间隔之后给出反馈。
2. 节流的实现原理
节流的原理非常简单,我们可以设计一种类似控制阀门一样定期开放的函数,也就是说,让函数执行一次之后,在某个时间段内暂时失效,过了这个时间段之后再重新激活。
3. 节流的应用场景
- 鼠标连续不断的触发某事件(如点击、滑动),只在单位时间内触发一次。
- 在页面的无限加载场景下,用户滚动页面时,每隔一段时间发送一次ajax请求,而不是在用户停下滚动页面时采取请求数据
4. 节流的代码实现
节流可通过两种方法来实现,一个是定时器(类似于防抖),另一个是时间戳。
- 利用定时器实现节流
function throttle(fn, wait){
var timer = null;
return function(){
if(!timer){
timer = setTimeout(function(){
fn();
timer = null;
}, wait);
}
}
}
function func(){
console.log("执行方法");
}
window.addEventListener('resize', throttle(func, 1000));
- 利用时间戳实现节流
function throttle(fn, wait){
var prev = Date.now();
return function(){
var now = Date.now();
if(now - prew >= wait){
fn();
prev = now;
}
}
}
function func(){
console.log("执行方法");
}
window.addEventListener('resize', throttle(func, 1000));
三、函数的传参问题
上面的代码有个小问题,就是我希望执行的方法没办法传参,下面是解决方法:
//在防抖或节流的 return方法内部
var context = this;
var args = arguments;
//将 fn()更改为
fn.apply(context, args);