防抖截流分析应用

最新推荐文章于 2022-05-29 16:24:12 发布

原创最新推荐文章于 2022-05-29 16:24:12 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

功能专栏收录该内容

14 篇文章

订阅专栏

本文深入探讨了JavaScript中的防抖(debounce)和节流(throttle)技术，通过示例代码展示了它们在滚动事件和输入事件中的应用。防抖常用于限制函数的频繁执行，如滚动时防止连续触发，而节流则用于控制执行频率，如在用户持续输入时保证一定的执行间隔。理解并合理使用这两种技术能有效提升网页性能。

应用场景：
防抖：滚动
截流：点击、输入

防抖
index.html

<!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">
    <script src="./throttle.js"></script>
    <title>Document</title>
    <style>
        body{
            height: 2000px;
            background: linear-gradient(#125,#eae);
        }
    </style>
</head>
<body>
    <h3>throttle节流</h3>
    <script>
        window.addEventListener('scroll',throttle(function(e){
            // console.log(Date.now())
            console.log(e)
        },500))
    </script>
</body>
</html>

throttle.js

function throttle(callback,wait) {
    //定义一个开始时间
    let start = 0;
    //返回结果是一个函数
    return function (e) {
        let now = Date.now()
        if (now - start>=wait) {
            //若满足条件，则执行回调函数
            callback.call(this, e)
            //修改开始时间
            start = now
        }
    }
}

节流
index.html

<!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">
    <script src="./debounce.js"></script>
    <title>防抖测试</title>
</head>
<body>
    <input type="text">
    <script>
        let input = document.querySelector('input')
        input.onkeydown =debounce(function(e){
            console.log(e.keyCode);
        },1000)
    </script>
</body>
</html>

debounce.js

function debounce(callback, time) {
    //定时器的变量
    let timeId = null
    //返回一个函数
    return function (e) {
        if (timeId !==null) {
            //清空定时器
            clearTimeout(timeId)
        }
        //启动定时器
        timeId = setTimeout(() => {
            //执行回调
            callback.call(this, e)
            //重置定时器变量
            timeId = null;
        },time)
    }
}