zoukankan      html  css  js  c++  java
  • 什么是防抖和节流?应用场景是什么?如何实现?

    一、防抖

    概念:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间

    场景:等待用户输入完毕再进行搜索

    思路:每次触发事件时都取消之前的延时调用方法

    const debounce = fn => {
        let timeout = null;          // 创建一个标记用来存放定时器的返回值
        return function (){
            clearTimeout(timeout);   // 当用户输入时把上一个setTimeout清除掉
            timeout = setTimeout(() => {
                fn.apply(this,arguments);
            },300)
        }
    }
    
    const sayHi = () => {
        console.log("防抖成功");
    }
    
    let inp = document.querySelector("#inp");
    inp.addEventListener("input",debounce(sayHi));     // 防抖

    一、节流

    概念:高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率

    场景:监听浏览器窗口变化时

    思路:每次触发事件时都判断当前是否有等待执行的延时函数

    const throttle = fn => {
        let canRun = true;          // 通过闭包保存一个标记
        return function (){
            if(!canRun) return;     // 在函数开头判断标记是否为true,不为true则return
            canRun = false;         // 立即设置为false
            setTimeout(() => {
                fn.apply(this,arguments);
                // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false,在开头被return掉
                canRun = true;
            },300)
        }
    }
    
    const sayHi = e => {
        console.log(e.target.innerWidth,e.target.innerHeight);
    }
    
    window.addEventListener("resize",throttle(sayHi));
  • 相关阅读:
    20111013 18:32 女友刁钻无聊问题之标准答案
    20111013 17:40 学ACM有什么用
    typedef用法(1)
    深入C++的new(20111115 15:08 )
    用四个0算二十四点
    20111010 20:14 HDU 4021 (15数码)
    pku3020 Antenna Placement (解法1)
    C++箴言:理解typename的两个含义
    20110907 00:16 ubuntu 如何修改当前用户名
    vc6.0中添加msdn 20111105 11:52
  • 原文地址:https://www.cnblogs.com/coolsboy/p/15048976.html
Copyright © 2011-2022 走看看