防抖和节流（属于js性能优化）

最新推荐文章于 2021-10-20 21:21:23 发布
最新推荐文章于 2021-10-20 21:21:23 发布
阅读量79 收藏
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47389477/article/details/108375609
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖和节流</title>
</head>

<body>
    
    <input type="button" value="按钮" class="btn">
    <span class="text"></span>
    <script>
        //  防抖：当持续触发事件，一段时间内没有在触发事件，事件处理函数才会执行一次 （另一个现象，一致触发一直不执行，至到触发停止，函数才会执行）
      /*   var btn = document.querySelector('.btn')
        var info = document.querySelector('.text')
        var num = 0
        var timer = null （属于防抖函数）
        btn.addEventListener('click', function () {
         ============================================
        if (timer) {
            clearTimeout(timer)
            timer = setTimeout(function () {
                info.innerHTML = num++
            }, 2000)
        } else {
            timer = setTimeout(function () {
                info.innerHTML = num++
            }, 2000)
        }
        =============================================
        代码的简化写法
            if(timer!==null){//不为空时执行，清除之前的额定时器，执行 新的定时器
                clearTimeout(timer)
            }
            timer = setTimeout(function () {//不管上述情况如何，都会执行这部分代码
                    info.innerHTML = num++
                }, 2000)
        }) */



        /* 节流：当事件持续触发时，保证一段时间内只触发一次函数 */
        var btn = document.querySelector('.btn')
        var info = document.querySelector('.text')
        var num = 0
        var isTimer = true
        btn.addEventListener('click', function () {
            if (!isTimer) {//不为真就返回
                return false
            }//隐含的意思是为真就继续执行
            isTimer = false//让isTimer为假
            timer = setTimeout(function () {
                info.innerHTML = num++
                isTimer = true
            }, 2000)
        })


    </script>
</body>

</html>

 

weixin_47389477
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS 性能优化：防抖(debounce)、节流(throttle)
爱玲姐姐的博客
04-16 816
一、防抖(debounce) const title = document.getElementById('title') // let timer = null // title.addEventListener('keyup', function () { // if(timer) { // clearTimeout(timer) // } // timer = setTi...
js防抖和节流的深入讲解
10-17
JavaScript中的防抖（debounce）和节流（throttle）是两种常见的性能优化技术，用于控制函数的执行频率，防止因频繁调用而导致的性能问题。这两种技术在处理如输入事件、滚动事件、窗口大小调整等场景时尤其有用。 ...
性能优化之防抖与节流
数组喜欢打对象的博客
10-20 185
防抖和节流都是一种性能优化的手段 1. 防抖（debounce） 实现原理:函数被触发时,先延迟执行的时间,在延迟的时间内如果再次被触发,则取消之前的延迟,再重新开始新的一轮延迟,达到只执行最后一次请求,其他请求则被过滤掉的效果。 通俗来讲就是:持续触发（事件）不执行，不触发的一段时间后才执行.（例如英雄回城） 实现思路：首次运行时把定时器赋值给一个变量，第二次执行时，如果间隔没超过定时器设定的时间则会清除掉定时器，重新设定定时器，依次反复，当停止下来时，没有执行清除定时器，超过一定时间后触发回调.
基于防抖和节流的性能优化
Hhjian524的博客
06-28 636
介绍： 当下网页中的交互越来越多，很多高频事件带来的性能问题，已经是绕不过去的一个坎。怎么去优化这些高频事件，以下来基于防抖和节流的性能优化。 1、防抖和节流的概念： 防抖：就是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。 节流：就是指连续触发事件，但是在一段时间中只执行一次函数。 2、手写防抖函数和节流函数： 2.1防抖函数 function debounce(fn,wait){ let timmer = null;
性能优化之——节流和防抖
Little_ChenH的博客
03-07 456
debounce(防抖)和throttle(节流) 纯代码，防抖和节流 【前端性能】高性能滚动 scroll 及页面渲染优化
什么是防抖和节流？vue 中如何使用防抖和节流
王图思睿
02-06 7141
原文地址：https://blog.error.work/qd/59.html 介绍 在 JavaScript 中，防抖和节流其实是一个很重要的概念。主要应用场景就是会频繁触发的事件，比如监听滚动、点赞功能，总不能点一次赞就向后台发送一次数据，这时候就要用到防抖和节流。 防抖和节流的核心就是定时器，我们要知道定时器的一个概念，就是在定时之后，在没触发之前清除定时器，这个定时器方法不会被触发。 防抖...
JS函数节流和防抖之间的区分和实现详解
10-17
JavaScript中的函数节流（Throttle）和防抖（Debounce）是优化性能的重要技术，尤其在处理频繁触发的事件上，如滚动、输入等。两者虽然都能限制函数的执行频率，但工作原理和应用场景有所不同。 **节流（Throttle）...
vue中使用防抖和节流
01-24
防抖(debounce)和节流(throttle)是两种常用的性能优化策略，它们可以帮助我们控制函数的执行频率，减少不必要的计算，从而提高应用的响应速度和效率。本文将详细介绍在Vue项目中如何实现和使用防抖与节流。 ### 1. ...
深入了解JavaScript 防抖和节流
10-16
JavaScript中的防抖(debounce)和节流(throttle)是两种常用的优化策略，它们主要用于控制频繁触发的函数调用，以提高性能和用户体验。这两种技术在处理窗口 resize 事件、滚动事件、搜索输入框的实时查询等场景中尤其...
JS函数节流和函数防抖问题分析
10-18
JavaScript中的函数节流（throttle）和函数防抖（debounce）是两种常见的优化策略，它们主要用于控制函数的执行频率，以避免在高频率事件触发时导致性能问题或不必要的资源消耗。 函数防抖（debounce）的核心思想是...
b050闲置图书分享-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-23
本次开发的闲置图书分享平台实现了收货地址管理、字典管理、公告管理、留言板管理、图书管理、图书收藏管理、图书评价管理、图书订单管理、用户管理、管理员管理等功能。系统用到了关系型数据库中王者MySql作为系统的数据库，有效的对数据进行安全的存储，有效的备份，对数据可靠性方面得到了保证。并且程序也具备程序需求的所有功能，使得操作性还是安全性都大大提高，让闲置图书分享平台更能从理念走到现实，确确实实的让人们提升信息处理效率。 管理图书的数据，此页面主要实现图书的增加、修改、删除、查看的功能。公告信息管理页面提供的功能操作有：新增公告，修改公告，删除公告操作。公告类型管理页面显示所有公告类型，在此页面既可以让管理员添加新的公告信息类型，也能对已有的公告类型信息执行编辑更新，失效的公告类型信息也能让管理员快速删除。
《大学生职业生涯规划与就业指导》大一阶段课程作业
最新发布
07-24
《大学生职业生涯规划与就业指导》大一阶段课程作业
开题报告潮汕特产直销系统 已通过开题答辩的.doc
07-23
随着互联网的高速发展，人们的生活方式发生了翻天覆地的变化，在过去，人们想要购买很远地方的东西会非常麻烦，因为是通信和交通都不是十分的方便，而现在网络购物成为了人们日常生活中不可或缺的一部分。在这样的背景下，互联网与传统行业的融合已经成为了一种不可阻挡的趋势。对于中国特色的潮汕特产来说，这一趋势也带来了巨大的变革和发展机遇[1]。
Python性能优化：掌握性能分析工具的实战指南
07-23
Python是一种广泛使用的高级编程语言，由Guido van Rossum于1989年底发明，第一个公开发行版发行于1991年。Python的设计哲学强调代码的可读性和简洁的语法（尤其是使用空格缩进来区分代码块，而不是使用大括号或关键词）。这使得Python被认为是一种易于学习的语言，同时具备强大的功能，适合初学者和经验丰富的程序员。 Python的主要特点包括： 1. **易于学习**：Python有相对较少的关键字，结构简单，和一个明确定义的语法。 2. **易于阅读**：Python代码定义的清晰度使得它像可执行伪代码。 3. **易于维护**：Python的成功在于它的源代码是相当容易维护的。 4. **广泛的标准库**：Python的标凑库很庞大，包含用于互联网通信、网络通信、数据压缩、加密、系统管理等的模块。 5. **跨平台**：Python可以在多种操作系统上运行，包括但不限于Windows、Mac OS X、Linux等。 6. **解释型语言**：Python是一种解释型语言，这意味着开发过程中没有编译步骤。 7. **动态类型系统**：Python不会在编写
Android学习系列之gradle实战
07-23
Android学习系列之gradle实战
RFC 3261中文版技术文档
07-23
**标题与描述解析** 标题"RFC 3261 中文文档"指的是互联网请求评论（Request for Comments）3261的中文版本。RFC 3261是互联网工程任务组（IETF）发布的一个重要标准，它定义了SIP（Session Initiation Protocol，会话初始协议）的核心规范。SIP是一种用于建立、修改和终止多媒体通信会话的协议，广泛应用于VoIP（Voice over IP，IP语音）和统一通信系统中。 描述同样简洁明了，只强调了这是RFC 3261的中文翻译，意味着对于中文读者来说，这个文档提供了一个理解SIP协议的中文语言资源。 **标签解析** "RFC3261 中文"标签进一步确认了文档的内容，表明这是关于RFC 3261的中文资料，便于搜索和分类。 **压缩包子文件的文件名称列表** 文件名为"RFC3261 中文.mht"，这是一个单一网页文件，通常包含HTML、图像和其他资源，用于保存完整的网页内容。用户可以通过打开这个文件来查看RFC 3261的中文翻译。 **SIP协议详述** SIP协议是基于文本的，其设计类似于HTTP
嵌入式LinuxC语言程序设计基础教程第8章函数解读.doc
07-23
嵌入式
DirectShow滤镜：字幕叠加功能（含注解说明）
07-23
DirectShow Transform Filter最典型的例子，带注释，难度不大，学习必备 博客对应文章http://blog.csdn.net/leixiaohua1020/article/details/12498975。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。
b069牙科就诊管理系统-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-23
牙科就诊管理系统利用当下成熟完善的SSM框架，使用跨平台的可开发大型商业网站的Java语言，以及最受欢迎的RDBMS应用软件之一的Mysql数据库进行程序开发。实现了用户在线查看数据。管理员管理病例管理、字典管理、公告管理、药单管理、药品管理、药品收藏管理、药品评价管理、药品订单管理、牙医管理、牙医收藏管理、牙医评价管理、牙医挂号管理、用户管理、管理员管理等功能。牙科就诊管理系统的开发根据操作人员需要设计的界面简洁美观，在功能模块布局上跟同类型网站保持一致，程序在实现基本要求功能时，也为数据信息面临的安全问题提供了一些实用的解决方案。可以说该程序在帮助管理者高效率地处理工作事务的同时，也实现了数据信息的整体化，规范化与自动化。 管理员在后台主要管理病例管理、字典管理、公告管理、药单管理、药品管理、药品收藏管理、药品评价管理、药品订单管理、牙医管理、牙医收藏管理、牙医评价管理、牙医挂号管理、用户管理、管理员管理等。 牙医列表页面，此页面提供给管理员的功能有：查看牙医、新增牙医、修改牙医、删除牙医等。公告信息管理页面提供的功能操作有：新增公告，修改公告，删除公告操作。公告类型管理页面显示所有公告类型，在此页面既可以让管理员添加新的公告信息类型，也能对已有的公告类型信息执行编辑更新，失效的公告类型信息也能让管理员快速删除。药品管理页面，此页面提供给管理员的功能有：新增药品,修改药品,删除药品。药品类型管理页面，此页面提供给管理员的功能有：新增药品类型,修改药品类型,删除药品类型。
js防抖和节流函数封装
07-28
防抖和节流是两种常用的函数优化技术，可以用来限制函数的执行频率，提高性能和用户体验。 防抖函数的作用是在短时间内连续触发同一事件时，只执行最后一次操作，而忽略之前的操作。可以用于处理频繁触发的事件，比如窗口大小改变、输入框输入等。 下面是一个简单的防抖函数封装示例： ```javascript function debounce(func, delay) { let timer = null; return function(...args) { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args); }, delay); }; } ``` 使用方式示例： ```javascript function handleInput() { // 处理输入事件 } const debouncedHandleInput = debounce(handleInput, 300); // 创建防抖函数 inputElement.addEventListener('input', debouncedHandleInput); // 绑定防抖函数到输入框的输入事件 ``` 节流函数的作用是在一定时间间隔内只执行一次操作，可以用于处理高频率触发的事件，比如滚动事件、鼠标移动事件等。 下面是一个简单的节流函数封装示例： ```javascript function throttle(func, delay) { let timer = null; return function(...args) { if (timer) return; timer = setTimeout(() => { func.apply(this, args); timer = null; }, delay); }; } ``` 使用方式示例： ```javascript function handleScroll() { // 处理滚动事件 } const throttledHandleScroll = throttle(handleScroll, 300); // 创建节流函数 window.addEventListener('scroll', throttledHandleScroll); // 绑定节流函数到窗口的滚动事件 ``` 以上是基本的防抖和节流函数封装示例，可以根据实际需求进行调整和扩展。希望能对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值