防抖和节流

Chase620 等级 1106 0 0
标签: 前端

防抖

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

  • 思路
    每次触发的时候取消之前的延时调用方法,以当下为准
//防抖
function debounce(fn){
    let timeout = null;
    return function(){
        clearTimeout(timeout);
        timeout = setTimeout(()=>{
            fn.apply(this,arguments);
        },500)
    }
}

function sayHello(){
    console.log("你好,防抖成功");
}

input = document.getElementById('inp')
input.addEventListener('input',debounce(sayHello)) 

但是以上方法的话 是以第一次执行为准,还可以添加判断,控制直接触发还是最后触发

const deb = (fn, delay, immediate) => {
    let timer = null
    return function() { 
        const context = this
        timer && clearTimeout(timer)
        if (immediate) {
            !timer && fn.apply(context, arguments)
        }
        timer = setTimeout(() => {
                       fn.apply(context, arguments)
                }, delay)
    }
} 

节流

触发高频事件后n秒内只执行一次,只有第一次执行结束才会执行第二次,从而稀释函数的执行频率

  • 基本思路 执行之前判断是否有有等待执行的延时函数,有:本次调用不执行,否则执行
//节流
//此方法的弊端 如果是异步函数无法执行
function throttle(fn){
    //通过闭包保存一个标记
    let canRun = true;
    return function(){
        //在函数开头判断标记是否为true,不为true则return
        if(!canRun){return;}
        //进入执行 标志重置为false
        canRun = false;
        setTimeout(()=>{
            fn.apply(this,arguments);
            //函数执行后设置为true 可以继续执行函数
            canRun = true;
        },500)
    }
}
  function sayHi(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener('resize', throttle(sayHi)); 

本文转自 https://www.jianshu.com/p/ccb6668cef09,如有侵权,请联系删除。

收藏
评论区

相关推荐

js的防抖与节流
在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。 此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。 函数防抖 函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才
性能优化之防抖和节流
我的前端学习笔记📒 最近花了点时间把笔记整理到语雀上了,方便童鞋们阅读 我的前端学习笔记📒(https://www.yuque.com/wanggangfeng
防抖和节流
防抖 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次触发,则重新计算事件 思路 每次触发的时候取消之前的延时调用方法,以当下为准 //防抖 function debounce(fn){ let timeout null; return function(){ clearTimeout
浅聊函数防抖与节流
防抖(debounce) 所谓防抖,就是指触发事件后 n 秒后才执行函数,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。 防抖类型分为 1. 非立即执行版 2. 立即执行版 3. 合成版本 防抖 防抖应用场景 登录、发短信等按钮避免用户点击太快,以致于发送了多次请求 调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到
Python分析5000+抖音大V,发现大家都喜欢这类视频!
最近,小F在知乎上看到一个关于抖音的问题。 里面提到了,目前我国人均每天刷短视频110分钟。 看这数据,看来小F又被平均了。 不过老实说,只要一打开抖音,小F确实是有一种停不下来的感觉~ 所以还是少刷抖音,多看书。要不然时间全流逝了。 本期就给大家用数据分析一下在抖音,什么类型的视频最受欢迎。 / 01 / 数据获取 数据来自于第三方监
记录 30 seconds of code 项目个人觉得中有价值的片段或者小技巧(二)
D F 系列 1、防抖函数,限制高频触发jsconst debounce (fn, ms 0) let timeoutId; return function(...args) clearTimeout(timeoutId); timeoutId setTimeout(() fn.apply(this, args), ms);
巨量星图发布直播间业务流程让买卖更简易
巨量星图直播间业务流程将聚集抖音短视频、今日今日头条和西瓜小视频所有主播资源。此次发布为1.0版本号,早期对外开放抖音主播。现阶段,第一批抖音短视频Top直播间大咖已进驻。顾客根据「我的星图」「直播主播」「抖音主播」点一下,就可以进到。直播间买卖步骤和小视频买卖同样,顾客在网络主播城市广场挑选大咖、选购网络主播并填好每日任务规定,即进行提交订单。履单全过程中
2020下半年美妆行业
一、抖音短视频美妆电商分析 ### 美容护肤、精致彩妆品类在抖音短视频中较为热销 2020下半年抖音短视频热销Top 1000商品中,美容护肤、精致彩妆类商品的数量占比跻身前四,仅次于食品饮料、日用百货 ![](https://oscimg.oschina.net/oscnet/b7e6208f-17ca-4fab-a768-dd140566f9f
2020年前端开发面试必考:什么是前端防抖?
防抖(去抖),以及节流(分流)在日常开发中可能用的不多,但在特定场景,却十分有用。 ![](https://oscimg.oschina.net/oscnet/dc9ed2e6-56be-427d-8f33-24e57538aa13.png) 最近有同学遇到了要做防抖的需求,那今天李老师就来讲解一下,什么是防抖。为了方便查阅和让不了解防抖
2020年前端开发面试必考:什么是前端防抖?
防抖(去抖),以及节流(分流)在日常开发中可能用的不多,但在特定场景,却十分有用。 ![](https://oscimg.oschina.net/oscnet/dc9ed2e6-56be-427d-8f33-24e57538aa13.png) 最近有同学遇到了要做防抖的需求,那今天李老师就来讲解一下,什么是防抖。为了方便查阅和让不了解防抖
该怎么进行抖音广告投放呢?
短片广告是目前最热门的广告形式之一,而抖音信息流广告则是广告主们热衷的投广告平台。广告主可以利用抖音应用投放广告,展示产品,引导消费者点击产品购买,这样就可以赚取一定的利润。下面我们就来介绍下在应该怎么做。抖音是怎么开设广告的呢?要准备什么在抖音上投放广告和在大多数广告平台上投放广告是一样的。有必要开一个推广帐户,预先充值然后投放广告。一、开设抖音短视频广告