JS技能 节流和防抖

概念:

说起节流防抖,大多数人首当其冲地说:防抖是一段时间内以最后一次动作执行为准,节流是,一段时间内以第一次执行动作为准。这么说没毛病,但这是从现象来总结的。问题来了:什么是节流、什么是防抖呢?

防抖(debounce):是指在事件触发后,延迟一定时间在执行回调函数,如果在延迟时间内又触发了该事件,则重新计时。

思路:事件要用到函数,延迟一定时间所以要用到定时器,需要知道在延迟的时间是否又触发了该事件要用到闭包

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    账户:<input type="text" id="useript">
    <script>
        var ipt = document.getElementById("useript");
        ipt.onkeyup=debounce(function(e){
            console.log(e);
        },1000);
        function debounce(fn, delay) {
            //这样子建立了一个闭包,timer始终存在
            var timer = null;
            // 这里返回的函数是每次用户实际调用的防抖函数
            return function (...args) {
               //如果已经设定过定时器了就清空上一次的定时器
                if (timer) {
                    clearTimeout(timer); //清除上一次的
                }
                timer = setTimeout(function () {
                    fn(...args)
                    timer = null;
                }, delay);
            }
        }
    </script>
</body>
</html>

节流(debounce):是指在一定时间内,只执行一次回调函数,如果在该时间段内多次触发该事件,只有第一触发会执行回调函数,后续的触发会被忽略。

思路: 每次事件被触发时,如果函数没有在指定的时间间隔内被调用过,则调用函数并设置一个计时器。如果在指定的时间间隔内再次触发了事件,则不调用函数,直到指定的时间间隔过去,重新开始调用函数。

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            top: 100px;
        }
    </style>
</head>

<body>
    <div class="box">
    </div>
    <script>
        var box = document.querySelector(".box");
        window.onmousemove = throttleMy(function (e) {
            box.style.left = e.pageX - (box.clientWidth) / 2 + "px";
            box.style.top = e.pageY - (box.clientHeight) / 2 + "px";
        }, 10)
        function throttleMy(fn, delay) {
            //这样子建立了一个闭包,timer始终存在
            var timer = null;
            return function (...args) {
                if (timer) {
                    return;// 只执行上一次
                }
                timer = setTimeout(function () {
                    fn(...args)
                    timer = null;
                }, delay);
            }
        }
    </script>
</body>

</html>
相关推荐
前端小巷子4 分钟前
浏览器的渲染流程:从 HTML 到屏幕显示
前端·javascript·面试
寒山李白7 分钟前
Java中高并发线程池的相关面试题详解
java·开发语言·面试·高并发·线程池·多线程
幼儿园口算大王9 分钟前
Java是实现大根堆
java·开发语言
0白露11 分钟前
java的深拷贝与浅拷贝
java·开发语言
EndingCoder12 分钟前
状态管理详解:Context API、Redux、Recoil 和 Zustand 在 React Native 中的应用
javascript·react native·react.js
zh_1999513 分钟前
用纯.NET开发并制作一个智能桌面机器人(五):使用.NET为树莓派开发Wifi配网功能
开发语言·php·.net·树莓派
sunbyte18 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | EventKey Codes(键盘码)
前端·javascript·css·vue.js·vue
前端Hardy1 小时前
实测!Three.js 实现动态粒子螺旋与星环环绕动画
前端·javascript
hbwhmama1 小时前
ubuntu24.04安装IDEA2025.1.2搭建java开发环境
java·开发语言
斯文by累1 小时前
Python环境搭建
开发语言·python