节流防抖

最新推荐文章于 2024-06-11 10:47:26 发布
最新推荐文章于 2024-06-11 10:47:26 发布
阅读量1.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33807889/article/details/104638697
版权

概要

防抖：先放你走，如果有新的人来了，再把你叫回来。（先用setTimeout让函数在一段时间后执行，如果有新的事件进来了，就杀死之前的timer），特点是杀死先触发的事件。


节流：你是动物园的饲养员，有很多人要给兔子喂胡萝卜（可能争先恐后的哦），你的策略是等吃完了上一根才允许下一个人继续给胡萝卜。（当已经在setTimeout执行了一个函数，就把开关关闭。函数执行完之后，记得把开关打开。）特点是杀死后触发的事件。


防抖demo

<!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>
        #box {
            background: #ccc;
            width: 1000px;
            height: 500px;
            text-align: center;
            line-height: 500px;
            font-size: 5rem;

        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        const debounce =(func, delay)=> {
            let timer = null;
            return function(...rest){
                clearTimeout(timer);
                timer = setTimeout(() => {
                    func.apply(this, rest);
                }, delay);
            }
        }
        document.getElementById("box").onmousemove = debounce(function (e) {
            this.innerHTML = `${e.clientX}-${e.clientY}`
        }, 50)
    </script>
</body>

</html>

节流demo

<!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>
        #box {
            background: #ccc;
            width: 1000px;
            height: 500px;
            text-align: center;
            line-height: 500px;
            font-size: 5rem;

        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        function throttle(func, delay) {
            let flag = true;
            return function(...rest) {
                if(!flag){
                    return ;
                }
                flag = false; 
                setTimeout(() =>{
                    func.apply(this,rest);
                    flag = true;
                },delay);
            }
        }
        document.getElementById("box").onmousemove = throttle(function (e) {
            this.innerHTML = `${e.clientX}-${e.clientY}`
        }, 500)
    </script>
</body>

</html>

综合版

<!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>
        #box {
            background: #ccc;
            width: 1000px;
            height: 500px;
            text-align: center;
            line-height: 500px;
            font-size: 5rem;
 
        }
    </style>
</head>
 
<body>
    <select id="select">
        <option value="audi">防抖</option>
        <option value="volvo">节流</option>
        <option value="mst">不加入防抖和节流</option>
    </select>
    <div id="box"></div>
    <script>
        const debounce = (func, delay) => {
            console.log('debounce');
            let timer = null;
            return function (...rest) {
                clearTimeout(timer);
                timer = setTimeout(() => {
                    func.apply(this, rest)
                }, delay);
            }
        }
        function throttle(func, delay) {
            console.log('throttle');
            let flag = true;
            return function (...rest) {
                if (flag) {
                    flag = false;
                    setTimeout(() => {
                        func.apply(this, rest);
                        flag = true;
                    }, delay);
                }
            }
        }
        function pure(func){
            return function(...rest){
                func.apply(this,rest);
            }
        }

        const option = [debounce, throttle,pure];
 
        // 业务
        var box = document.getElementById("box");
        var myselect = document.getElementById("select");
        var index = myselect.selectedIndex;
 
        const main = () => {
            box.onmousemove = option[index](function (e) {
                this.innerHTML = `${e.clientX}-${e.clientY}`
            }, 50)
        }
 
        myselect.addEventListener('change', function () {
            index = myselect.selectedIndex;
            main();
        }, false)
        main();
    </script>
</body>
 
</html>

tips

@wx:qq981145483

良纵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
防抖和节流的区别和举例（简要说明、形象比喻、容易理解）
南北极之间
05-21 682
总的来说，防抖和节流都是为了减少事件触发频率，优化性能。在一定时间内，多次触发同一个事件，但只有在最后一次触发后，经过指定的等待时间，才会执行相应的事件处理函数。在一定时间内，多次触发同一个事件，但只会执行一次事件处理函数，无论这个事件被触发了多少次。在前端开发技术中，防抖（Debounce）和节流（Throttle）是两种常用的性能优化技术，主要用于处理高频事件触发，如用户的点击、滚动、输入等操作。在事件被频繁触发的情况下，防抖可以保证一定时间内只触发一次回调，并且是在事件触发结束后的一定时间内触发。
uni-app - 节流与防抖（按钮节流、输入框防抖解决方案）
王佳斌
10-13 5030
uni-app - 节流与防抖（按钮节流、输入框防抖解决方案），uniapp js 按钮 点击事件 防抖节流 防抖和节流事件的触发，Vue.js uni-app 实现节流与防抖，防抖节流的区别和使用场景，前端什么是节流与防抖，uniapp项目中使用防抖及节流一种方案，uniapp 输入框防抖节流_防抖、节流。
uni-app 实现节流与防抖
热门推荐
weixin_54904917的博客
05-17 1万+
提示：这次要讲的前端关于节流和防抖 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 一、什么是防抖？ 防抖是指在频繁触发某一个事件时，一段时间内或者一定条件下不再触发该事件对应调用的函数。 二、防抖代码 1.示例:防止按钮多次连续点击 代码如下（示例）： <template> <view> <view style="margin-top:80rpx;"> &lt...
何谓节流和防抖？
最新发布
weixin_44309299的博客
06-11 457
电梯里第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖。防抖触发高频率事件时n秒后只会执行一次，如果n秒内再次触发，则会重新计算。函数防抖一定连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行。只需窗口调整完成后，计算窗口大小。高频事件触发，每次触发事件时设置一个延迟调用方法，并且取消之前延时。简单概括：每次触发事件时都会判断是否等待执行的延时函数。电梯第一个人进来后，15秒后准时运送一次，这是节流。防抖是将多次执行变为最后一次执行，
UniApp按钮短时间内点击多次只网络请求一次实现防抖或节流
qq_40649554的博客
02-29 1562
通过使用防抖或节流函数，我们可以确保在UniApp中，当用户短时间内多次点击按钮时，只发送一次网络请求。这不仅提高了用户体验，还减少了不必要的网络负担。在实际开发中，根据具体需求和场景，选择合适的防抖或节流函数来处理按钮点击事件是非常重要的。
uni-app 简单实现防抖和节流
不甜呐的博客
02-13 2759
uni-app 简单实现防抖和节流
uniapp 防抖节流
前端-CV全粘工程师
09-22 497
uniapp 全局 防抖 节流
防抖、节流
qq_28773159的博客
03-24 126
防抖、节流
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
10-14
JavaScript的节流（throttle）和防抖（debounce）是优化用户体验和提高应用性能的重要技术手段，特别是在处理频繁触发的事件时，如输入搜索、滚动事件或点击事件。这两种技术的主要区别在于它们如何控制事件处理函数...
通过实例学习React中事件节流防抖
10-16
在React开发中，高效地处理用户输入和页面交互是非常重要的，而事件节流（throttling）和防抖（debouncing）技术就是用来优化这种处理的关键策略。它们可以帮助我们在高频率的事件触发下，减少不必要的计算和DOM操作...
JavaScript节流防抖
06-09
js节流防抖 $u.throttle(()=>{ // 节流 },1000) $u.debounce(()=>{ // 防抖 },3000)
浅谈JS函数节流防抖
10-19
函数节流和函数防抖是前端JavaScript中经常使用的两种技术，用于控制事件处理器在一定时间内的执行频率。它们主要用于性能优化，以避免因高频率的事件触发导致的浏览器卡顿甚至崩溃。 函数节流（Throttle）的核心...
工具类，节流防抖，集合交并补
12-14
工具类 节流防抖 集合交并补
uniapp 输入框防抖节流_浅谈JS的节流与防抖
weixin_39857211的博客
12-05 209
函数节流在一段时间内，只能触发一次函数，如在这段时间内多次触发，也只能执行一次。举个栗子 我们在打王者时，当英雄技能释放后，会有几秒cd时间，在这几秒内，不管再怎么点技能，都无效，cd时间结束后才能再释放。function throttle(fn, delay) { let cd = false return function () { if (cd) { ...
javascript的防抖和节流理解与应用
weixin_43342105的博客
10-10 574
函数的防抖 定义 函数防抖：当持续触发事件是，一定事件内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。此技术多用于文本搜索框搜索信息展示功能等情况 上面定义有点抽象，打个比方，比如我准备连续搞7天学习，结果我只搞了三天学习，第四天晚上打游戏去了没搞学习，结果我又立下了一个flag，重新开始连续搞七天学习。 在打一个更接近编程的比方：比如监听一个输入框文字变化后触发的change事件，直接用keyup事件，则会频繁触发change事件，防抖则会在用户输
uniapp 防抖和节流的使用
weixin_38946164的博客
09-15 1644
在规定时间内仅能触发一次，但到了下一个时间段，也还会继续触发一次事件。：在一个时间段内触发几次事件，就延迟触发几次，并只触发最后一次事件。（一直快速触发几分钟后停止，只会执行最后的那一次事件）（一直快速触发几分钟后停止，会执行多次事件）
[JS] 函数防抖与节流
Agumr的博客
11-08 360
函数的防抖与节流 概述 有些场景会频繁的触发事件，比如说搜索框实时的发出请求，onscroll，resize，onmousemove等，但是我们并不像如此频繁的触发事件，这时候就要用到防抖和节流了 function handler() { console.log(document.body.scrollTop) } window.addEventListener('scroll', handler) 在上面的代码中，我们每滚动一次，handler就会执行很多次，我们需要使用防抖与节流来限制事件平
uniapp 防抖节流封装和使用
Mybabyying的博客
11-20 2165
防抖(debounce)：定义一个时间，延迟n秒执行，n秒内再次调用，会重新计时，计时结束后才会再次执行。节流(throttle): 函数会在一个时间段内只执行一次。函数封装 util文件下创建 commo.js文件。函数封装 util文件下创建 commo.js文件。主要运用场景：登陆、频繁请求大量数据接口。
resize 节流防抖
08-12
- *3* [js节流防抖应用场景,以及在vue中节流防抖的具体实现操作](https://blog.csdn.net/yetaodiao/article/details/127371795)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值