文章目录
自定义JS工具类 相关类似的源码请看 https://gitee.com/ykang2020/my_utils
1. 浏览器事件触发
一些浏览器事件: window.onresize
、window.mousemove
等,触发的频率非常高,会造成界面卡顿
还有比如:用户疯狂点击,多次触发click事件;用户连续输入,多次触发keyup事件等
如果向后台发送请求,频繁触发,对服务器造成不必要的压力
所以要限制事件处理函数频繁调用,就有两种方式可以做到,分别是函数节流和函数防抖
节流:
防抖:
2. 函数节流(throttle)
Why
在页面中滚动鼠标滚轮,会触发scroll事件,而滚动一次会触发很多次!!!如果向后台发送请求,频繁触发,对服务器造成不必要的压力
window.addEventListener("scroll", function (e) {
console.log(e);
});
How
通过设置一个时间间隔,使得函数在执行一次之后,超过时间间隔才会执行第二次
适合多次事件按照时间做平均分配触发
单位时间内,多次触发事件,只会有一次生效
Where
resize
窗口调整
scroll
页面滚动
mousemove
DOM元素拖拽功能
click
疯狂点击
throttle.js
创建一个节流函数,在 wait 毫秒内最多执行 callback
一次
/**
* 实现函数节流
* 功能: 创建一个节流函数,在 wait 毫秒内最多执行 `callback` 一次
* @param {*} callback
* @param {*} wait
* @r