1、闭包、防抖、节流

简介: 1、闭包、防抖、节流

1、什么是闭包


简单来说就是,函数嵌套函数,内部的函数就是闭包。当我们想访问内部函数的时候,我们是不能够直接访问的,所以需要在外面函数设置一个返回值,把内部函数作为返回值返回出来。这样外部环境就可以使用内部函数,也就是闭包。正常一个函数被执行完毕时,里面的变量就会被销毁。但闭包不是,虽然外部函数已经执行完毕,但内部函数赋值给了外部的变量,内部函数还没有被执行完,它还存储在内存空间中,所以外部函数的内容空间没有被销毁,外部函数的变量保存了下来。


    function outerFun() {
      let num = 10;
      function innerFun() {
        console.log(num);
      }
      return innerFun;
    }
    // 全局环境下拿到内部函数,相等于fun:innerFun
    let fun = outerFun();
    // 直接调用内部函数
    fun();


2、什么是防抖?


  • 用户触发事件过于频繁,我们只需要最后一次事件的操作即可


  //  1、防抖:用户触发事件过于频繁,只需要最后一次事件的操作
  let dataInput = document.querySelector('input');
  dataInput.oninput = antiShake(function () {
    console.log(this.value);
  }, 2000);
  //  2、封装防抖
  function antiShake(fn, wait) {
    let timeOut = null;
    return function () {
      if (timeOut) clearTimeout(timeOut);
      //  用call把this指针指向input
      timeOut = setTimeout(() => { fn.call(this); }, wait);
    }
  }

3、什么是节流?


  • 用户触发事件过于频繁,控制每隔多少秒发生一次;例如,表单提交
//  3、节流:用户触发事件过于频繁,控制每隔多少秒发生一次;例如,表单提交
  let submit = document.querySelector('button');
  let click = true;
  submit.onclick = throttle(function () {
    console.log('hello world');
    click = true;
  }, 2000);
  //  4、封装节流
  function throttle(fn, wait) {
    return function () {
      if (click) {
        setTimeout(() => {
          fn();
        }, wait)
      }
      click = false;
    }
  }


相关文章
|
3月前
|
UED
函数防抖
在频繁触发的情况下,只有足够的空闲时间,才执行代码一次,如果没有执行完就清除掉,重新执行逻辑。简单来说,当触发后再次触发,会取消上一次触发的执行,直到最后一次触发后过去设定时间后才执行。
34 5
|
3月前
节流、防抖
节流、防抖
21 2
|
3月前
|
算法 前端开发
2627. 函数防抖
2627. 函数防抖
29 0
|
3月前
|
前端开发 UED
关于防抖和节流的理解
防抖和节流是前端开发中常用的两种性能优化技术。
23 0
|
JavaScript
原生js实现一个节流函数和防抖函数?
原生js实现一个节流函数和防抖函数?
58 0
|
JavaScript 前端开发
节流与防抖
节流与防抖
36 0
|
JavaScript
如何通过原生js实现一个节流函数和防抖函数?
如何通过原生js实现一个节流函数和防抖函数?
|
前端开发
什么是防抖和节流?有什么区别?
什么是防抖和节流?有什么区别?
61 0