zoukankan      html  css  js  c++  java
  • JavaScript 函数节流和函数去抖

    概念

    函数防抖(debounce)

    当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间

    函数节流(throttle)

    预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期

    函数节流(throttle)与 函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。

    函数防抖(debounce)

    如果有人进电梯(触发事件),那电梯将在10秒钟后出发(执行事件监听器),这时如果又有人进电梯了(在10秒内再次触发该事件),我们又得等10秒再出发(重新计时)。

    function debounce(fn,wait){
        var timer = null;
        return function(){
            clearTimeout(timer)
            timer = setTimeout(()=>{
                fn()
            },wait)
        }
    }
    
    function log(){
        console.log(1)
    }
    
    window.addEventListener('scroll', debounce(log, 1000));

    函数节流(throttle)

    保证如果电梯第一个人进来后,10秒后准时运送一次,这个时间从第一个人上电梯开始计时,不等待,如果没有人,则不运行。

    function throttle(fn,wait,time){
        var previous = null; //记录上一次运行的时间
        var timer = null;
    
        return function(){
            var now = +new Date();
    
            if(!previous) previous = now;
            //当上一次执行的时间与当前的时间差大于设置的执行间隔时长的话,就主动执行一次
            if(now - previous > time){
                clearTimeout(timer);
                fn();
                previous = now;// 执行函数后,马上记录当前时间
            }else{
                clearTimeout(timer);
                timer = setTimeout(function(){
                    fn();
                },wait);
            }
        }
    }
    function log(){
        console.log(1)
    }

     

    移动端开发的兼容问题(自我总结篇)

    浏览器常见兼容问题以及解决办法

  • 相关阅读:
    excel 上标和下标
    Excel之tab键
    Excel分数、小数、身份证的录入
    excel快速访问工具栏和自定义选项卡
    excel如何快速实现数据区域的框选
    excel 如何快速实现绝对引用
    INT函数和ROUND
    Excel Vlookup 列查找函数
    excel合并同类项去重求和功能
    VBA 一个很神奇的东西
  • 原文地址:https://www.cnblogs.com/gitnull/p/10474487.html
Copyright © 2011-2022 走看看