Function-advanced

函数进阶

1. 函数防抖

在频率触发的情况下 只有等待一定的时间才会触发 执行一次代码

特点

• 执行之前先清除之前的即将执行操作 保证只有最后一次生效

• 优化高频执行JS代码操作

• 提高性能

防抖代码实现

  // 使用setTimeout实现函数防抖
  var t = null;
  document.onmousemove = function (){
    // 每次移动之前清除先前计时器
    clearTimeout(t);
    t = setTimeout(() => {
      // 等待300毫秒后执行打印语句
      console.log('鼠标移动停止300毫秒打印');
    }, 300);
  }

防抖应用场景

一些高频率事件 在被连续多次触发时 只需生效一次

1. 搜索输入框 用户可能输入很快 在输入停止一段时间后再将请求发送

2. 用户名 手机号 邮箱注册时验证是否符合规范

3. 窗口大小时间resize 只需在窗口调整完成后再主席那个resize里代码 防止重复渲染 浪费性能

---

2. 函数节流

在频率触发的情况下 每间隔一段时间才触发一次

特点

• 前一次存在触发执行未结束 后一次触发执行不会开始

• 优化高频执行JS代码操作

• 提高性能

节流代码实现

  // 利用 状态 概念
  var t = null;
  document.onmousemove = function (){
    // 当计时器处于开启状态 不再重新开启新计时器
    if(t) return;
    t = setTimeout(() => {
        console.log("函数节流每300毫秒触发一次");
        t = null;
    }, 300);
  }

节流应用场景

一些高频率事件 间隔一段时间运行一次 被连续多次触发如果处于间隔时间内无效

1. 鼠标移动事件 如元素拖拽 获取鼠标坐标

2. 页面中的滚动事件

3. 频繁点击提交按钮

4. 游戏中一些设计 如: 枪射速 每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