函数进阶
1. 函数防抖
在频率触发的情况下 只有等待一定的时间才会触发 执行一次代码
特点
执行之前先清除之前的即将执行操作 保证只有最后一次生效
优化高频执行JS代码操作
提高性能
防抖代码实现
// 使用setTimeout实现函数防抖
var t = null;
document.onmousemove = function (){
// 每次移动之前清除先前计时器
clearTimeout(t);
t = setTimeout(() => {
// 等待300毫秒后执行打印语句
console.log('鼠标移动停止300毫秒打印');
}, 300);
}
防抖应用场景
一些高频率事件 在被连续多次触发时 只需生效一次
搜索输入框 用户可能输入很快 在输入停止一段时间后再将请求发送
用户名 手机号 邮箱注册时验证是否符合规范
窗口大小时间resize 只需在窗口调整完成后再主席那个resize里代码 防止重复渲染 浪费性能
2. 函数节流
在频率触发的情况下 每间隔一段时间才触发一次
特点
前一次存在触发执行未结束 后一次触发执行不会开始
优化高频执行JS代码操作
提高性能
节流代码实现
// 利用 状态 概念
var t = null;
document.onmousemove = function (){
// 当计时器处于开启状态 不再重新开启新计时器
if(t) return;
t = setTimeout(() => {
console.log("函数节流每300毫秒触发一次");
t = null;
}, 300);
}
节流应用场景
一些高频率事件 间隔一段时间运行一次 被连续多次触发如果处于间隔时间内无效
鼠标移动事件 如元素拖拽 获取鼠标坐标
页面中的滚动事件
频繁点击提交按钮
游戏中一些设计 如: 枪射速 每1000毫秒触发一次 每500毫秒触发一次
3. 闭包函数
概念
- 有权访问另一个函数中的变量 并让函数不会因为执行完毕而被销毁
原理
- 让函数定义和表达式通过另一个函数return出来 这样在里面的函数就可以访问另一个函数内的变量 当外部函数被调用时就会返回一个内部函数
作用
- 在函数内部可以访问到外部变量
- 避免全局变量命名空间的污染
- 延长变量生命周期
- 函数不会因为执行完毕而被销毁
闭包函数的创建
// 立即执行函数使fn得到return返回值
const fn = (function(){
let a = 10;
return function(){
return a;
}
})()
// fn返回值为函数 加上()调用函数得到此函数return值
console.log(fn()); // 10
闭包函数的应用
const divs = document.querySelectorAll("div");
// 添加了错误索引
for(var i = 0; i < divs.length; i++){
divs[i].onclick = function(){
// 因为异步原因 执行点击事件时 i已经为最大值
console.log(i);
}
}
// 添加了正确索引
// 方法一
for(var i= 0; i < divs.length; i++){
;(function(i){
divs[i].onclick = function(){
console.log(i);
}
})(i);
}
// 方法二
for(var i = 0; i < divs.length; i++){
divs[i].onclick = (function(i){
return function(){
console.log(i);
}
})(i);
}
// 方法三
for(let i=0;i<divs.length;i++){
divs[i].onclick = function(){
console.log(i);
}
}
沙箱模式
function outer() {
let a = 10;
let str = 'hello world';
// 返回一个对象
return {
// 对每个私有变量都准备两个函数：get用来获取，set用来修改
getA () { return a },
setA (val) { a = val },
getStr (val) { return a },
setStr: function (val) { a = val }
}
// 使用数据劫持中getter和setter优化
// return {
// get A() {return a}
// set A(val) {a = val}
// get Str() {return str}
// set Str(val) {str = val}
// }
}
4. 函数柯里化(Curring)
将一次传入多个参数的函数 转换为多次执行 一次执行传入一个参数的函数
例如 fn(1, 2, 3) 转换为 fn(1)(2)(3)
利用闭包延长变量生命周期把每次的传递参数保存下来 也可以保存每层function中程序
function fn1(a, b){
return a + b
}
function fn2(a) {
return function (b) {
return a + b
}
}
fn1(1, 2) // 3
fn2(1)(2) // 3
// 解析
// fn2(1) 返回function(b) {return a + b} 并且这个返回的函数能访问到第一次传入的值1 并且 值1生命周期没有结束 fn2(1)(2)返回a + b = 3