防抖 =》 短时间中只触发最后一次
- 比如:坐公交车的时候,当车的人满了之后,公交车才出发
节流 =》 短时间中触发少次
- 比如:坐公交车的时候,一个站点停一段事件,再出发
节流:在短时间中,触发大量的事件,对浏览器造成很大压力
使用节流:
//在最开始的时候,需要定时开始的时间
let firstTime = 0;
document.onmousemove = function(e){
//定义一个时间戳
let nowTime = +new Date();
//当当前时间减掉开始的时候小于500毫秒的时候,代码不要执行
if(nowTime - firstTime < 500){
return;
}
//对于第二次往后,每一次的开始时间,就是上一次的结束时间
firstTime = nowTime;
//执行代码
console.log(1111111);
console.log(e);
console.log(1111111);
}
高阶版节流:
- 将业务代码和节流代码分开
- 封装一个节流
- 短时间中,触发少次的事件
<script>
// 业务代码
function fn(e){
console.group("开始");
console.log(e);
console.groupEnd();
}
// 封装一个节流
function throttle(fn,time){
// 定义初始时间为0
let firstTime = 0;
return function(){
// 获取当前的时间
let nowTime = +new Date();
// 当前时间减去初始事件小于设置时间就不执行后续代码
if(nowTime - firstTime < time){
return;
}
// 每执行一次就将上次的时间赋值给初始时间
firstTime = nowTime;
// 执行业务代码 改变this的指向,参数二为参数
fn.call(this,arguments[0])
}
}
document.onmousemove = throttle(fn,500);
</script>
高阶版防抖:
- 短时间中,触发大量的事件,会对浏览器造成很大压力,短时间中,触发最后一次事件
// 业务代码
function fun(e) {
console.group("开始");
console.log(e);
console.groupEnd();
}
// 获取元素
const inp = document.querySelector("input");
// 封装防抖
function debounce(fn, time) {
let timer = null;
return function () {
// 判断timer 是否有赋值定时器
if (timer) {
// 如果有就清除定时器
clearTimeout(timer);
}
// 赋值定时器 一段时间后执行
timer = setTimeout(() => {
fn.call(this, arguments[0])
}, time);
}
}
// 输入事件
inp.oninput = debounce(fun, 1000)
函数柯理化
- 将一个函数的多个参数当做多个函数的一个参数来执行
- 在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数 (最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。
const password = "123456";
function fn(pwd){
return function (newPwd){
return pwd === newPwd;
}
}
const result = fn(password);
const r1 = result("1234");
const r2 = result("12345");
const r3 = result("123456");
console.log(r1,r2,r3);
//封装校验密码的函数
// 封装的意义就是为了简化代码的复用