2.函数节流

最新推荐文章于 2024-10-02 05:39:15 发布

半夜追风人

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量70

点赞数 1

分类专栏：面试准备中文章标签： javascript

本文链接：https://blog.csdn.net/m0_46439976/article/details/120235187

版权

面试准备中专栏收录该内容

17 篇文章 0 订阅

订阅专栏

函数节流：A事件执行完成引起B事件执行，在规定时间内，不管A时间执行了多少次，B事件只执行一次

为什么要使用函数节流：和函数防抖一样，只是降低事件执行频率没有函
数防抖强
例子：点击某个提交按钮，发送请求（如果用户快速不间断点击，我们也在规定时间内只提交一次）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数节流</title>
</head>
<body>
    <button type="submit">提交</button>
</body>
<script>
    let btn=document.querySelector('button')
    function throttle(fn,timeout){
        let timer=null
        return function (){
            if (timer){
                return
            }
            timer=setTimeout(function (){
                fn()
                clearTimeout(timer)
                timer=null
            },timeout)
        }
    }
    btn.onclick=throttle(function (){
        console.log("发送给请求")
    },1000)
</script>
</html>