防抖和节流

Chase620 等级 908 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直播间大咖已进驻。顾客根据「我的星图」「直播主播」「抖音主播」点一下,就可以进到。直播间买卖步骤和小视频买卖同样,顾客在网络主播城市广场挑选大咖、选购网络主播并填好每日任务规定,即进行提交订单。履单全过程中
什么是巨量引擎广告投放平台
是字节跳动集团的商业营销平台。现在,在抖音的头条和广告,比如在抖音宣传的淘宝、京东,还有抖音feed直播发货、鲁班发货等的推广。通过一个巨大的引擎交付平台交付。如何在巨量引擎广告平台上创建广告群?选择推广目的。点击“推广管理”,在巨量引擎的广告平台上选择“新广告群”,然后根据你推广的产品或服务类型选择推广目的。推广目标包括应用推广、销售线索收集、抖音推广、店
抖音广告推广平台支持哪些推广方式?
主要将产品放在巨大的引擎广告的背景中。抖音广告支持的方式包括应用推广、销售线索收集、抖音推广、店铺推广、目录推广、电商店铺推广、头条文章推广、商品推广。我们将在下面详细介绍它们。八大类中最常用的是抖音推广、商品推广、电商店铺推广、店铺推广。抖音促销。推广抖音是一个旨在获取大量粉丝,以粉丝为基础,获取线索/制作订单的效果广告。从定义中我们可以看出抖音的吸引力主
抖音带货与供货商合作模式,怎么找带货主播合作渠道
在这个时代,靠抖音赚钱,走向人生巅峰,已经不是什么新鲜事了。有的人靠抖音视频走红,然后在抖音上砍价或者直接卖货,赚的钱足够他们买一套好房子,开一辆好车,带着家人到处旅游度假... 那么如果你也想趁这个时间,搭上抖音红利的顺风车,又该怎么通过来实现呢?那么,抖音什么阶段带货?1.纯图形叠加阶段难度较低,可以通过单一软件完成。2.直接拍摄产品视频,没有外观,没有
SRS之安装与使用
1\. 安装 ====== 1.1 github 获取源码 --------------- git clone https://github.com/ossrs/srs.git 1.2 编译 ------ ### 1.2.1 关闭防火墙和 selinux 先关闭防火墙,防止有时候启动没有问题,但是就是看不了。 Centos6.x
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) 最近有同学遇到了要做防抖的需求,那今天李老师就来讲解一下,什么是防抖。为了方便查阅和让不了解防抖
抖音推广怎么赚钱 这篇攻略请收好
抖音促销。赚钱是真的吗?如何在中赚钱?在抖音,什么推广能赚钱?下面,我们来详细介绍一下抖音小游戏推广赚钱的方法。想通过抖音赚钱的朋友可以知道。什么是抖音迷你游戏推广?抖音迷你游戏推广意味着抖音在平台上,人们可以发布指定的游戏内容,然后就可以获得利润。利润可以实时查看,人们可以用钱包赚钱。在抖音APP中,搜索“游戏达人推广”,即可进入推广平台(小程序)查看详细