js防抖和节流

最新推荐文章于 2024-08-22 14:32:34 发布

面向百度丶CV开发

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量449

点赞数

文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/weixin_45952434/article/details/122843599

版权

本文介绍了防抖和节流两种常见的前端优化技术，它们分别在鼠标跟随、页面滚动和防止重复调接口等场景中发挥作用。防抖确保在一定时间内只执行一次请求，而节流限制了请求频率但允许多次触发，每触发一次间隔一定时间。

摘要由CSDN通过智能技术生成

防抖(只执行最后一次)

<!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>
    <button>点我试试</button>
    <script>
        var btn = document.querySelector('button')
        var timer = null
        btn.onclick = function() {
            clearTimeout(timer)
            timer = setTimeout(() => {
                console.log('发送请求了');
            }, 500)
        }
    </script>
</body>

</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">
    <title>Document</title>
</head>

<body>
    <button>点我试试</button>
    <script>
        var btn = document.querySelector('button')
        var flag = true
        btn.onclick = function() {
            if (flag) {
                flag = false
                console.log('发送请求了');
                setTimeout(() => {
                    flag = true
                }, 1000);
            }
        }
    </script>
</body>

</html>

应用场景

1.鼠标跟随
2.页面滚动、缩放
3.防止重复调接口
4.搜索框查询

区别

防抖：一段时间内只执行一次。
节流：一段时间内，会产生多次效果，只不过每一次之间得频率降低了。

面向百度丶CV开发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js防抖和节流

防抖(只执行最后一次)<!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"> &lt
复制链接

扫一扫