封装防抖（debounce)函数

最新推荐文章于 2024-07-02 17:57:33 发布
最新推荐文章于 2024-07-02 17:57:33 发布
阅读量436 收藏 2
点赞数 1
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46611729/article/details/111146225
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin: 20px auto;
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="dv"></div>
    <script>
        const dv = document.getElementById('dv')

        /* 
       封装防抖函数
       */
        function debounce(callBack, time) {
            // callBack: 传入的回调函数
            // time: 定时器的第二个参数（多长时间触发）
            // 存放定时器的Id
            let timer = null
            return function () {
                // 通过定时器Id清除定时器
                clearTimeout(timer)
                // 将定时器的返回值 定时器Id 存到 timer 中
                timer = setTimeout(() => {
                    // 通过 apply 改变传入的回调函数 callBack 的 this 指向
                    // 通过 arguments 拿到外层函数的事件对象（箭头函数没有 this 指向）
                    // 注意：事件处理函数只能有一个形参（拿到事件对象），
                    // 如果要传多个参数，方法:在外面封装一个函数，在事件处理函数中调用
                    callBack.apply(this, arguments)
                }, time)
            }
        }

        dv.onmousemove = debounce(function (e) {
            this.innerHTML = `x的坐标为${e.pageX},y的坐标为${e.pageY}`
        }, 100)

    </script>
</body>

</html>
中国的流浪猫
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
节流工具函数封装
kingAn123的博客
08-14 1301
节流函数throttle用于解决频繁操作问题，限制一定时间内点击不触发事件 文章目录一、不同的实现方法1、定时器2、时间戳二、最优方法三、开始封装工具函数1、utils文件夹封装2、页面内调用四、局部变量问题五、回调函数无法传参问题1、尝试不传入整个函数,而是传入`func()`2、曲线救国,给工具函数传参数,而不是给回调函数传参数 一、不同的实现方法 1、定时器 缺点 首次也会被延...
封装一个节流函数
大牛的博客
10-21 247
function jieliu (handler,delay) { let clear=null return ()=>{ //保存this对象 let _this = this //传入的参数 let arg = arguments if(!clear) { clear=setTimeout(()=>{ clear=null handle.
防抖（debounce）函数
最新发布
工作随记
07-02 344
防抖（debounce）的基本原理是将多次执行合并为一次执行。具体来说，当事件频繁触发时，防抖机制会在每次事件触发时重置计时器，只有当事件在一定时间内没有再次触发时，函数才会执行。这样可以避免函数在短时间内被多次调用，从而提高性能和响应速度。
节流函数封装
zhu_menglu的博客
01-04 197
【代码】节流函数封装。
JS封装节流函数
m0_74265396的博客
01-06 483
节流函数是一种常用的优化方法，用于限制一个函数在一定时间内只能执行一次，可以有效避免高频率触发函数执行的问题。被节流限制为每500ms执行一次，所以实际上每隔500ms才会打印一次当前时间。返回一个新的函数，在调用新函数时，会根据当前时间判断是否执行。这样，通过节流函数可以有效限制函数的执行频率，避免过多的执行次数。函数，用于打印当前时间。进行节流，将节流后的函数赋值给。在例子中，我们定义了一个。每100ms调用一次。
JavaScript 节流函数封装
youngjqz的博客
04-25 2642
上一篇写了防抖,现在来写一下节流,节流函数是在一段时间内多次触发某个事件,但是在这一段时间内只执行一次,下面我们来实现一个 按钮在 N 秒之内点击多次,但是却执行一次,话不多说,上代码. // 首先,我们在 html 里面 写一个按钮 <button id="button">点我点我快点我</button> 和防抖一样,还是使用 setTimeout 来实现,按钮点击,创建延时,但是在延迟没有执行的情况下,我们不能再次创建延迟 let button = document.query
防抖节流函数js封装模块
10-19
防抖（debounce）和节流（throttle）是常用的两个 JavaScript 函数优化技术，它们可以帮助我们避免在高频率事件触发时导致的性能问题。 防抖和节流的主要区别在于它们处理事件触发的方式不同。防抖在事件触发后等待...
防抖与节流的封装函数与使用详解
01-20
为了解决这个问题，我们可以采用函数节流（throttle）和函数防抖（debounce）技术。 函数防抖（debounce）的基本思想是在一系列连续的调用中，只有在最后指定的一段时间内没有新的调用，才会执行函数。这个策略就像...
在vue中使用防抖函数组件操作
10-15
防抖(debounce)函数就是一个非常实用的工具，它可以确保一个函数不会在短时间内被连续调用，而是等待一段时间后再执行。本文将详细介绍如何在Vue中使用防抖函数组件。 首先，我们来看一个基础的防抖函数实现。以下...
在vue+element ui框架里实现lodash的debounce防抖
10-16
这时，lodash的`debounce`函数就能派上用场，它可以帮助我们实现防抖(debounce)功能，避免频繁触发昂贵的操作，如网络请求。 防抖(debounce)是一种优化策略，它确保一个函数在连续触发时，只有在停止触发一段时间后...
浅谈JavaScript节流和防抖函数
10-14
对于已经封装好的库，比如lodash，提供了更为完善的节流和防抖函数实现。使用lodash库中的节流防抖函数，可以简化代码的编写，如下所示： ```javascript $(window).on('scroll', _.debounce(doSomething, 200)); ``...
函数节流闭包封装
mlxgzzz
04-02 369
var count = 0; function myFunc() { count++; console.log(count); } var func = throttle(myFunc, 100); window.onresize = function () { f
防抖/节流函数封装
weixin_46889432的博客
09-18 406
防抖函数 例子：等电梯–电梯从最后一个人进来开始计算，10秒之后执行关门；如果一直有人往电梯里面走的话，电梯可能永远关不上 理解：忽略前面所有高频操作，从最后一次调用开始，之后延时x毫秒执行 防抖函数思路：定时n秒, 到了才执行逻辑代码, 如果事件又触发了, 清除上一个定时器, 重新创建定时器 最后执行一次 防抖函数封装—debounce function debounceBuilder (f, t = 1000) { console.log('防抖' + t + '毫秒') let timerId
JS 封装节流(后期优化)
web$-小白
08-08 1022
封装节流
封装防抖节流函数
weixin_56166823的博客
07-05 169
节流函数可以设定一定时间间隔执行一次函数，常用在滚动加载、页面 resize 等场景中，减少函数执行次数。防抖函数可以在一定时间内只执行一次，常用在输入框搜索、窗口缩放等场景中，避免频繁触发函数导致性能问题。防抖和节流是常见的前端性能优化方法，可通过封装一个函数来实现。
vue2.0_节流函数（1）的封装和使用
QiuRenBB的博客
02-11 1441
首先 在src下新建的utils文件夹中新建一个index.js文件，用于存放封装的方法。 然后将节流函数（1）的方法写入： /*** * 节流函数 在wait间隔时间内不再进行任何调用时，触发一次最后的调用（如:wait设置为300ms，一直点击，该函数一直不执行，只有在间隔了300ms不做任何点击后，才执行刚才的最后一次点击） * @ func 执行函数 * @ wait 等待时间 * @ {Boolean} immediate 是否立即执行 * @return {Function} */
节流与防抖的讲解与其封装
zhangawei123的博客
11-17 931
本文讲解一下节流和防抖的原理，和简单的使用。然后做一下节流与防抖的封装。
JS中的节流函数throttle的理解与封装
weixin_47342624的博客
09-23 1178
/ 1.记录上次触发时间，第一次默认为0// 2. 实现节流的处理函数// 3. 获取每次触发当前时间// 4. 获取下次触发节流响应函数的剩余时间// 5. 当下次触发响应函数时间小于0时，说明达到节流时间间隔，执行函数// 绑定需要节流的时间this，以及传递的参数// 保留本次执行后的当前时间，供下次触发时做处理判断}}// 返回节流函数}
debounce 防抖的简易封装
bobringtheboys的博客
06-23 213
const debounce = function (fn, delay) { let timer = null const that = this return function () { const param = arguments if (timer) { window.clearTimeout(timer) } timer = window.setTimeout(function ()
ts封装防抖节流函数
03-02
TypeScript（简称TS）是一种由微软开发的开源编程语言，它是JavaScript的一个超集，可以编译成纯JavaScript代码。在TS中，我们可以使用装饰器和泛型等特性来封装防抖节流函数。 防抖函数和节流函数都是用于控制函数执行频率的方法，常用于优化性能和避免重复触发事件。 防抖函数的作用是在一定时间内，如果事件持续触发，则重新计时，直到事件停止触发后才执行函数。常见的应用场景是输入框搜索联想功能。 节流函数的作用是在一定时间内，无论事件触发多少次，只执行一次函数。常见的应用场景是滚动加载数据。 下面是一个使用TS封装防抖节流函数的示例： ```typescript // 防抖函数 function debounce(func: Function, delay: number): Function { let timer: number | null = null; return function (...args: any[]) { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { func.apply(this, args); }, delay); }; } // 节流函数 function throttle(func: Function, delay: number): Function { let timer: number | null = null; return function (...args: any[]) { if (!timer) { timer = setTimeout(() => { func.apply(this, args); timer = null; }, delay); } }; } ``` 使用示例： ```typescript function search(keyword: string) { // 模拟搜索功能 console.log(`Searching for ${keyword}`); } const debouncedSearch = debounce(search, 300); const throttledSearch = throttle(search, 300); debouncedSearch('apple'); debouncedSearch('banana'); debouncedSearch('cherry'); throttledSearch('apple'); throttledSearch('banana'); throttledSearch('cherry'); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值