防抖和节流

最新推荐文章于 2024-04-07 11:56:57 发布
最新推荐文章于 2024-04-07 11:56:57 发布
阅读量77 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiao1_wang2_/article/details/107492560
版权 
<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        div#app>div{

            height: 300px;

        }

        div#app>div:nth-child(2n){

            background-color: red;

        }

    </style>

</head>

<body>

    <div id="app">

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <div>4</div>

        <div>5</div>

        <div>6</div>

        <div>7</div>

        <div>8</div>

        <div>9</div>

        <div>10</div>

        <div>11</div>

        <div>12</div>

    </div>

    <script>

    /*****************************简化后的分割线 ******************************/

    /*

    防抖(debounce)

    基于上述场景，首先提出第一种思路：在第一次触发事件时，不立即执行函数，

    而是给出一个期限值比如200ms，然后：



    如果在200ms内没有再次触发滚动事件，那么就执行函数



    ///

    如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时

    ///

    效果：如果短时间内大量触发同一事件，只会执行一次函数。



    实现：既然前面都提到了计时，那实现的关键就在于setTimeOut这个函数，

    由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现：





    */

   // fn [function] 需要防抖的函数

    // delay [number] 毫秒，防抖期限值



    function debounce(fn,delay){

        let timer = null //借助闭包

        return function() {

            if(timer){

                clearTimeout(timer) 

            }

            timer = setTimeout(fn,delay) // 简化写法

        }

    }

    // 然后是旧代码

    function showTop  () {

        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

    　　console.log('滚动条位置：' + scrollTop);

    }



    // window.onscroll = debounce(showTop,1000)

     // 为了方便观察效果我们取个大点的间断值，实际使用根据需要来配置



        var fn=debounce(showTop,1000)



     window.onscroll = function(){

         fn();

     }

    </script>

</body>
/ 
<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        div#app>div{

            height: 300px;

        }

        div#app>div:nth-child(2n){

            background-color: red;

        }

    </style>

</head>

<body>

    <div id="app">

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <div>4</div>

        <div>5</div>

        <div>6</div>

        <div>7</div>

        <div>8</div>

        <div>9</div>

        <div>10</div>

        <div>11</div>

        <div>12</div>

    </div>

    <script>

        function throttle(fn,delay){

            let valid = true

            return function() {

               if(!valid){

                   //休息时间 暂不接客

                   return false 

               }

               // 工作时间，执行函数并且在间隔期内把状态位设为无效

                valid = false

                setTimeout(() => {

                    fn()

                    valid = true;

                }, delay)

            }

        }

        /* 请注意，节流函数并不止上面这种实现方案,

           例如可以完全不借助setTimeout，可以把状态位换成时间戳，然后利用时间戳差值是否大于指定间隔时间来做判定。

           也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在，如果存在表示还在冷却，并且在执行fn之后消除定时器表示激活，原理都一样

            */

        // 以下照旧

        function showTop  () {

            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

        　　console.log('滚动条位置：' + scrollTop);

        }

        window.onscroll = throttle(showTop,1000) 

    </script>

</body>
xiao1_wang2_
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中使用防抖和节流
01-24
防抖(debounce)和节流(throttle)是两种常用的性能优化策略，它们可以帮助我们控制函数的执行频率，减少不必要的计算，从而提高应用的响应速度和效率。本文将详细介绍在Vue项目中如何实现和使用防抖与节流。 ### 1. ...
JS防抖和节流实例解析
10-16
主要介绍了JS防抖和节流实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
js防抖和节流
黎小小的博客
10-16 206
防抖：在n秒内，多次触发，只执行最后一次节流：事件多次触发，每间隔n秒执行一次定时器方式实现防抖和节流时区别：（清除定时器时机不同）注意如果函数有参数，是在返回函数中获取上下文this和参数，并通过fn.apply(context,args) 方式进行传递。
JS防抖和节流
热门推荐
叶子yes的博客
08-27 1万+
在进行窗口的操作或者输入框操作时，如果事件处理函数用的频率无限制，会加重浏览器和服务器的负担，此时我们就可以用防抖（debounce）和节流（throttle）的方式来减少调用频率，同时又不影响实际效果。在设定的时间内触发一次事件，会在设定的时间结束之后执行该事件处理程序，如果在设定的时间内多次触发事件，则每次触发事件都会重新计时。（可以将防抖类比成电梯：第一个人进电梯之后，电梯会在5秒之后自动关闭电梯门，如果在这5秒内又有人进来了，那么电梯会重新等待5秒后再关门。）...
防抖 节流 防抖和节流
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
04-07 410
防抖==回城；节流==普攻。
JavaScript防抖和节流
油墨香^-^的博客
02-22 596
作为学习，我们肯定不满足只会用第三方的库，成为一个API程序员。另外为了一个防抖函数引用整个库对最终打包项目的大小也会有影响。所以，我们要实现一个自己的防抖函数。注意，在整个实现过程中，我尽可能不采用ES6的语法；因为如果我们不babel来处理我们的代码，ES6以上的语法会存在兼容性问题；我们封装的防抖和节流函数就不太具备通用性；2.3.1. 防抖基本功能防抖函数的核心思路如下：当触发一个函数时，并不会立即执行这个函数，而是会延迟（通过定时器来延迟函数的执行）
学习防抖和节流
鹤渺的星球
05-17 379
以上就是关于防抖和节流的记录啦！总算深入的学习了。
Vue 中使用lodash对事件进行防抖和节流操作
10-15
为了优化这类事件的处理，开发者可以使用防抖(debounce)和节流(throttle)技术。这两个概念都是用来控制函数执行频率，从而减少不必要的计算和提高应用性能。 防抖(debounce)和节流(throttle)的主要区别在于它们处理...
防抖和节流Throttle and debounce.html
05-17
防抖和节流
js防抖和节流的深入讲解
10-17
JavaScript中的防抖（debounce）和节流（throttle）是两种常见的性能优化技术，用于控制函数的执行频率，防止因频繁调用而导致的性能问题。这两种技术在处理如输入事件、滚动事件、窗口大小调整等场景时尤其有用。 ...
使用 React 和 Redux 进行井字游戏并附带源代码.zip
最新发布
07-24
项目：使用 React 和 Redux 进行井字游戏并附带源代码 使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。 关于项目 井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。 要运行此项目，您需要 在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
使用 JavaScript 编写的专注力游戏（附源代码）.zip
07-24
项目：JavaScript 中的专注力游戏（附源代码） 专注力游戏是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这款游戏很有趣。玩家必须点击移动的框并获得分数。要点击正确的位置，玩家需要在这个游戏中集中注意力。这款游戏可以帮助玩家练习以进一步增强他们的专注力。 游戏制作 这个游戏项目仅使用 HTML、CSS 和 JavaScript。说到这个游戏的特点，用户必须单击移动框并得分。游戏有三种模式：简单、中等和困难。游戏的 PC 控制非常简单。您只需使用光标单击移动框的碎片即可。 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目？ 要运行此游戏，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要玩游戏，首先，单击 index.html 文件在浏览器中打开游戏。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
人脸识别方案资料61EDA-C1590.zip
07-24
人脸识别方案资料61EDA_C1590.zip
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明）
07-24
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明） 该设计为DK124控制的开关电源，实现12V 2A输出； 功能： 1、使用DK124核心控制； 2、反激式开关电源拓扑设计； 3、实现12V 2A输出； 4、市电输入； 5、整流、滤波、变压器等电路； 6、原理图、PCB图、BOM表、设计说明；
基于Springboot和Vue的生鲜超市管理的设计与实现源码 生鲜超市管理的设计与实现代码（优秀毕业设计）
07-24
生鲜超市管理的设计与实现源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
使用 ReactJs 编写的简单旅行计划器（附源代码）.zip
07-24
项目：使用 ReactJS 编写的简单旅行计划器（附源代码） ReactJs 中的简单旅行计划器是一个简单的 JavaScript 项目。该项目是 ReactJS 中待办应用程序的一个简单示例。 关于项目 Simple Trip Planner In Reactjs 是使用ReactJS开发的。这个项目很容易做一种应用程序。这个项目使用 React 库来完成任务。为了运行这个项目，你必须在系统中安装 NodeJs。当你运行这个项目时，你的应用程序从主页开始。从那里你可以导航到菜单。你只能将计划添加到你的书中。你还可以对旅行进行分类。你所要做的就是输入日期和地点，然后选择你想要的旅行计划类型。 要运行此项目，您需要 在计算机上安装ReactJS和 NodeJs，并使用现代浏览器，例如Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
俄罗斯方块的python代码
07-24
这段Python代码实现了一个简单的俄罗斯方块游戏，使用Pygame库处理图形和用户输入。游戏初始化Pygame库并设置屏幕大小为800x600像素，定义不同颜色和形状的方块。游戏由一个`Tetris`类管理，负责游戏状态和逻辑操作，每个方块由一个`Block`类表示，包含其形状、颜色、位置等信息。 在主循环中，游戏通过事件处理机制响应用户的键盘输入，箭头键用于移动和旋转方块，空格键用于快速下落。游戏会检测方块是否与已有的方块或边界发生碰撞，如发生碰撞，当前方块会固定在场地上并生成新方块。填满的行会被清除，玩家获得相应分数。 游戏通过一个二维数组维护场地状态，每个元素表示一个单元格是否被占据，通过检查和清除单元格实现行消除。整个游戏不断刷新屏幕更新显示，确保流畅运行，绘制背景、方块和边框，使界面美观易理解。 总体而言，这段代码展示了如何使用Pygame库实现经典俄罗斯方块游戏，包括图形绘制、用户输入处理和基本游戏逻辑，让玩家通过移动和旋转方块消除行并获得高分。
绿色金融：“双碳”经济时代，银行业务增长新引擎-埃森哲(
07-24
绿色金融：“双碳”经济时代，银行业务增长新引擎-埃森哲(
axios防抖和节流
09-10
防抖和节流是一种对事件处理函数进行优化的技术，可以用于限制函数的触发频率。在给定的时间间隔内，防抖只会执行最后一次触发的事件处理函数，而节流则会按照一定的时间间隔有规律地执行事件处理函数。这两种技术...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值