防抖（闭包加定时器）

最新推荐文章于 2023-07-13 09:58:12 发布
最新推荐文章于 2023-07-13 09:58:12 发布
阅读量439 收藏
点赞数
分类专栏： 前端笔记 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zjp567/article/details/122869097
版权

防抖 JavaScript 滚动事件 性能优化 debounce
关键词由优快云通过智能技术生成

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>防抖</title>
    </head>
    <body>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
        <div>ssssss</div>
    </body>
    <script type="text/javascript">
        function showTop() {
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            console.log("滚动条的位置")
        }
        function debou(fnName,delay){
            let timer=null;
            return function(){
                if(timer){
                    clearTimeout(timer);
                }
                timer=setTimeout(fnName,delay);
            }
        }
        window.onscroll = debou(showTop,1000);
    </script>
</html>

【闭包】前端的“保护神”——闭包详解+底层原理
代码的魅力，根本走不出来
12-21 969
它们能够保持对外部数据（如事件触发时的状态、函数参数等）的访问，即使在异步操作完成后，闭包仍然能够访问这些数据。你可以将某些功能封装在闭包内部，外部只能通过公开的方法调用它们，从而达到隐藏细节、减少外部依赖的目的。闭包提供了数据封装的能力，可以将状态和行为封装在一个函数内部，并通过暴露的接口与外部进行交互。闭包可以用于权限管理和角色管理的场景中，通过闭包来封装不同角色的权限信息，从而提供灵活的权限控制。是私有的，外部无法直接访问。，即使这个函数在外部被调用时，依然能访问到其定义时的父函数的局部变量。
JS 定时器结合闭包实现-节流与防抖
Allurewuhui的博客
03-26 948
防抖： 概念：用户连续点击，前面的触发都被取消，只有最后一次触发的回调在规定时间后才会触发。 即：如果连续触发 只会执行最后一次触发的回调。 使用场景： 百度搜索框中输入对应内容下方会有相关内容的提示，如果每输入一个文字都发送一次请求是非常浪费性能的，所以使用节流设置一个时间，只有当用户输入完内容之后不在输入，经过了预先设置好的时间才会发起请求。 // 防抖 // 概念：用户连续点击，前面的触发都被取消，只有最后一次触发的回调在规定时间后才会触发。 // 即 如果连续触发 只会执行最后一次触发的
按键防抖--定时器
u010743406的博客
04-01 306
按键防抖-1 按键防抖-2
定时器及节流防抖
qq_34821328的博客
03-14 504
定时器的使用及节流防抖 微信小程序の计时器练习 PS：暂时只实现了计数器功能，节流防抖–明日继续2020/3/14 效果图： <!--index.wxml--> <view class="box" hidden="{{hidden}}"> <view class="title">计数器</view> <view class="time...
定时器实现防抖节流
Hyanl的博客
12-01 514
场景：点击按钮请求；搜索框输入查询，用户最后一次输入完，再发送请求。场景：监听滚动事件；搜索框，搜索联想功能。定义：在一段时间内只在最后一次触发方法。定义：在一段时间内，只会触发一次方法。
9.27 for循环里闭包加定时器
まどか
10-16 245
JavaScript 的setTimeout 和Angular中的$timeout的區別 4.2.1需要在init之后异步调用this.scope.$apply() 进行视图层的更新，不然切换标签页会导致数据置空
防抖函数的实现
zl960320的博客
08-03 770
1.什么是防抖？防抖有什么作用？ 带着这个问题，开始本篇讲述，一开始听防抖我也是蒙蒙的，今天又遇到了，记录一下。加深印象。 防抖就是当持续触发事件时，在一定时间内如果没有触发该事件，事件处理函数会执行一次，当在一定时间内触发该事件时，会清除定时器，只在最后执行一次。 这里有清除定时器，所以，防抖函数里需要使用定时器。 我们以输入框中输入内容为例，1s时间内在文本框中输入内容，如果1s内多次按下键盘按键，就清除定时器。直到1s时间到了之后输出最后结果。通俗讲，就是无论1s内按了多少次按键，都不会触发，
通过闭包简单完成防抖功能的实现方法
09-19
定时器版本
防抖和节流为什么用到闭包
最新发布
08-24
闭包在防抖的实现中，可以保存一个定时器的标识，每次触发事件时先清除定时器，再重新设置定时器。 节流（Throttle）是指在一段时间内只执行一次回调函数。例如，当用户连续滚动页面时，我们可以设置一个固定的时间...
定时器防抖案例
图图小淘气的博客
11-30 729
HTML： <body> <div class="wrapper"> <div class="center"> </div> <div class="main"> <div class="left"> <a href="#" class="sy">首页</a&gt...
防抖和节流的定时器写法和时间戳写法详解
weixin_51938803的博客
07-13 663
防抖和节流的定时器写法和时间戳写法详解
前端研习录（32）——JavaScript 基于定时器实现防抖、节流
清风不渡
08-16 736
重拾前端记忆，记录学习笔记，现在进入JavaScript 防抖、节流部分
防抖和节流
weixin_49021391的博客
11-14 369
防抖和节流
vue的防抖节流
m0_71933813的博客
04-01 372
防抖和节流是常用的优化前端性能的方法。 一.防抖 1.防抖是指在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。防抖的实现方式可以使用setTimeout函数和闭包。 2.防抖封装 export function debounce(fn: Function, delay = 200) {// 参数1：调用的函数或者是请求 参数2：延迟多少毫秒才执行 let timer: NodeJS.Timeout | null = null;//设定一个，在没有执行定时器为null
防抖跟节流
HQ\(^o^)/的博客
08-19 434
都是为了解决高频触发事件,减少请求防抖: 当频繁触发事件,一段时间内没有再次触发这个事件,它就会执行定时器里面的代码, 例如:回城节流:当频繁的触发某个事件,它会降低执行的次数, 例如游戏中的 技能cd冷却时间。
手写防抖节流
belle_mei的博客
03-27 483
最近在准备找实习，看了很多关于前端面试的经典题，本文主要介绍自己在B站学习的关于手写节流和防抖的知识。 防抖 防抖，即短时间内大量触发同一事件，只会执行一次函数（例如：设置1s之后才会去执行函数，那么在触发函数之后的0.5s的时候有触发了函数，那么该函数就会重新进行计时，直到在这1秒的时间内没有再触发函数） 。 实现原理为设置一个定时器，约定在 xx 毫秒后再触发事件处理，每次触发事件都会重新设置计时器，直到 xx 毫秒内无第二次操作 。 防抖常用于搜索框/滚动条的监听事件处理，如果不做防抖，每输入一个字
定时器防抖动
zhangjianjun521的博客
05-18 824
/*功能:使用定时器防抖动 *2016年5月14日20:35:13 */ #include #include #include #include #include #include #include #include #include #include #include static struct class *seventhdrv
css事件，定时器，防抖，节流
qq_52563729的博客
10-10 561
1
JavaScript之闭包、定时器
大灰狼的小绵羊哥哥的博客
02-18 3920
谈谈闭包 对于JavaScript而言，虽然没有块作用域的概念，但是有函数作用域的概念，若是想从全局环境下去访问一个函数内的局部变量，是办不到的；但是根据JavaScript中的链式作用域的概念，它是可以访问外面的全局变量的，所以，针对一个被定义在函数内的函数，它的父函数中的所有变量也是能够被它访问到的。 什么是闭包 闭包(Closure)是让内部函数能够访问外部函数中的变量
js定时器防抖函数的使用
07-27
这样，如果在延迟时间内再次调用闭包函数，旧的定时器会被清除，从而实现了防抖效果。 使用示例： ```javascript function handleInput() { console.log('Input was debounced!'); } const debouncedHandleInput...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值