12-函数节流

• 1.什么是函数节流[throttle]?

  • 函数节流也是优化高频率执行js代码的一种手段
  • 可以减少高频调用函数的执行次数

• 2. 函数节流作用

  • 减少代码执行次数, 提升网页性能

• 3. 函数节流应用场景

  • oninput / onmousemove / onscroll / onresize 等事件

• 4. 函数节流和函数防抖区别

  • 函数节流是减少连续的高频操作函数执行次数 (例如连续调用10次, 可能只执行3-4次)
  • 函数防抖是让连续的高频操作时函数只执行一次(例如连续调用10次, 但是只会执行1次)

    let timerId = null;
    let flag = true;
    window.onresize = function () {
        if (!flag){ // if(false)    if(true)    if(false)
            return;
        }
        flag = false;
        timerId && clearInterval(timerId);
        timerId = setTimeout(function () {
            flag = true;
            resetSize();
            console.log("尺寸变化");
        }, 500);
    }