防抖和节流

防抖和节流和预解析

一、防抖函数

当持续触发事件，一定时间内没有再触发事件 事件函数才会执行一次，如果设定时间到来之前，有一次触发了事件，就重新开始延时。

function input(value) {
  console.log(`输出的内容是${value}`)
}

function debounce(fun, delay) {
  let timer;
  return function (args) {
    const that = this;
    clearInterval(timer);
    timer = setTimeout(function () {
      fun.call(that, args)
    }, delay)
  };
}

const debounceInput = debounce(input, 500);
const ipt = document.getElementById('input');
ipt.addEventListener('keyup', function (e) {
  debounceInput(e.target.value);
})

二、节流函数

当持续触发事件的时候，保证一段时间之内，只调用一次事件处理函数

function handle() {
  console.log(Math.random())
}

function throttle(func, wait) {
  let timeout;
  return function () {
    let context = this;
    let args = arguments;
    if (!timeout) {
      timeout = setTimeout(function () {
        timeout = null;
        func.apply(context, args)
      }, wait)
    }
  }
}
document.getElementById('btn').onclick = throttle(handle, 1000);
// console.log([...new Set([...document.querySelectorAll('*')].map(v => v.tagName))]);

三、预解析

var a=100;     //全局
function test() {
  a=100;    //这里的a是函数内的
  console.log(a)
  console.log(this.a)   //this ==window node环境下无window
  var a;    //预解析时，将此行放到第3行上，并初始化为undefined
  console.log(a)   等同于第4行
}

test()
//无对象调用的函数   this==window
// 预解析  预先解析代码 在执行代码之前就解析（初始化undefined）
// 先定义（变量提升）再使用

node环境下的结果是

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ipdSj6DQ-1604582994184)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20201103191859458.png)]

在浏览器下的结果是

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QguET7wu-1604582994187)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20201103191947376.png)]

var a=10;
(function () {
  var a=b=100;  //等价于  （没有var）b=100;var a=b
})()
console.log(a) //全局    10
console.log(b) //全局    100
// 先在函数内部找b，找不到就到外面找，在全局创建一个b

// 作用域 ：函数作用域  es6块级作用域
for (var i = 0; i < 3; i++) {  //var 函数作用域
  setTimeout(function () {
    console.log(i)
  }, 0)
}
// 输出 333
// 异步处理机制  --js是单线程， settimeout异步任务，不在主线程中
// 主程序执行for，把三个settimeout异步任务放到等待队列
// 等主线程执行完毕，此时i=3 再把异步任务拿到主线程执行，此时输出的是3
// 如何输出 0 1 2 ？
// 将var 改成let，let块级作用域，
// for三个块级作用域，第一个块级作用域是0，第一个块级作用域是3，第一个块级作用域是2
=3 再把异步任务拿到主线程执行，此时输出的是3
// 如何输出 0 1 2 ？
// 将var 改成let，let块级作用域，
// for三个块级作用域，第一个块级作用域是0，第一个块级作用域是3，第一个块级作用域是2