防抖和节流

Chase620 等级 554 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
Android抖音去水印APP
本文同步发表于我的微信公众号,在微信搜索 OpenCV or Android 即可关注。 前言 微信8.0.0更新以后,大伙玩得不亦乐乎,除了会动的表情,特效的炸弹、烟花等,还有一个亮点就是微信个人状态背景,既可以挂图片,更可以挂视频,给人一种万物皆可短视频的感觉。我也很爱这个功能,但是奈何鄙人才疏学浅,没法制作炫酷的短视频。只能使用去抖音水印工具获取
Flutter 移动应用开发指南
Flutter 移动应用开发指南 Flutter 作为新一代的跨平台 UI 框架,已经在 Android 和 iOS 移动平台被广泛使用,未来还会进一步扩展到 Web、桌面和嵌入式等平台。只要编写一次代码,就可处处运行,真正做到了全屏制霸。本文将通过从零开发一个类似抖音的短视频应用来展示 Flutter 应用的完整开发过程,以及它的强大性和易用性。
防抖和节流
防抖 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次触发,则重新计算事件 思路 每次触发的时候取消之前的延时调用方法,以当下为准 //防抖 function debounce(fn){ let timeout null; return function(){ clearTimeout
零信任安全:针对网络威胁的多层保护
深度防御:安全层部署零信任此信息图显示了零信任模型如何在每个安全层上结合使用“信任门”和“深度防御”来保护您最宝贵的资产(数据)的机密性,完整性和可用性。 零信任安全性是下一代安全模型,可防止日益严重的网络威胁。在当今这个高速时代,全天候24 x 7运作,在全球COVID19大流行中,全球移动性同样突然而突然停止,IT安全模型必须
火绒安全软件(安全防护软件)官方中文版V5.0.59.0 | 火绒安全软件好用吗
火绒安全软件是目前国内极少数专注安全防护软件领域集‘杀、防、管、控’于一体的良心软件,具有资源占用小、高查杀、低误杀、多重防护、弹窗广告拦截器、系统加固、轻巧纯净以及不弹窗、不捆绑、不劫持浏览器等优点,将各类威胁拦截在系统之外并帮助广大火绒安全软件用户全面拦截阻止流氓软件,该互联网安全软件拥有领先的安全核心技术、EDR运营体系和成熟的产品,能够有效帮
关于根据颜色刷选图像内容的问题
在CSDN本人博文《OpenCVPython图像处理:用inRange刷选图像中指定颜色对象案例》(请点击文章底部最下方的“阅读原文”跳转CSDN阅读原文)中介绍了根据颜色刷选图像内容相关的概念及实现,介绍了通过使用inRange在HSV颜色空间中识别制定颜色的图像内容,文中概要介绍了HSV颜色空间中进行制定颜色对象识别的要点,使用的inRange函数的语法
Python音视频开发:实现消除抖音短视频Logo的工具
一、引言在《Python音视频开发:消除抖音短视频Logo和去电视台标的实现详解》节介绍了怎么通过Python+Moviepy+OpenCV实现消除视频Logo的四种方法,并提供了详细的实现思路和实现代码,但这种原生态的应用不适合开发人员以外的其他人员使用,提供一个图形界面的工具程序是比较好的解决方案,本文就介绍实现这样一个图形化工具的步骤。本节的背景知识都
Centos小故障解决方案
出现错误:为 repo AppStream下载元数据失败的错误解决方法:大多半是防火墙出了问题(1)vi /etc/sysconfig/networkscripts/ifcfgens33 文件,修改如下,主要修改 ONBOOT 和 BOOTPROTO:(2)重新载入配置文件nmcli c reload(3)执行命令[root@localhost ] yum
liunx服务器防火墙开启导致无法远程连接解决方案
前言在使用阿里云服务器的过程中,开启了服务器的防火墙,导致本地xshell以及阿里云官网自带的远程连接【端口:22】均无法使用,所有服务器开启的端口无法使用,在联系阿里云技术客服后,才得到了解决,将整个解决方案总结如下,希望可以帮到那些遇到此类问题的同学。 解决思路1.设置救援连接密码2.进行救援连接(和电脑系统的安全模式启动类似)3.关闭防火墙4.成功解决
浅聊函数防抖与节流
防抖(debounce) 所谓防抖,就是指触发事件后 n 秒后才执行函数,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。 防抖类型分为 1. 非立即执行版 2. 立即执行版 3. 合成版本 防抖 防抖应用场景 登录、发短信等按钮避免用户点击太快,以致于发送了多次请求 调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到
Python分析5000+抖音大V,发现大家都喜欢这类视频!
最近,小F在知乎上看到一个关于抖音的问题。 里面提到了,目前我国人均每天刷短视频110分钟。 看这数据,看来小F又被平均了。 不过老实说,只要一打开抖音,小F确实是有一种停不下来的感觉~ 所以还是少刷抖音,多看书。要不然时间全流逝了。 本期就给大家用数据分析一下在抖音,什么类型的视频最受欢迎。 / 01 / 数据获取 数据来自于第三方监
边界防御·信息安全保密圈的 “丈八蛇矛”
提及《金山毒霸》,大家都不陌生,它是中国的病毒防护软件,也是国内少有的拥有自研核心技术、自研杀毒引擎的杀毒软件,是由金山网络旗下研发的。有一点大家很容易忽略那就是它是国内王老安全企业率先提出的“边界防御”理念,该技术业务在2012年终首次落地。随着网络技术的不断发展以及网络建设的复杂化,网络边界安全成为最重要的安全问题,需要对其进行有效的管理和控制,主要体现
关闭防火墙指令 | 爱恨如写意山水画
root下执行systemctl stop firewalld.service关闭防火墙