节流防抖，简单快速理解

最新推荐文章于 2022-04-09 18:14:32 发布

AF01

最新推荐文章于 2022-04-09 18:14:32 发布

阅读量439

点赞数

分类专栏：函数文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/songJunFeng1/article/details/122766963

版权

函数专栏收录该内容

34 篇文章 1 订阅

订阅专栏

<!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>
</head>
<style>
    .box {
        height: 9000px;
    }
</style>

<body>
    <button class="buttonDebounce">防抖点击</button>
    <button class="buttonThrottling">节流点击</button>
    <script>
        //防抖debounce代码：防抖就是单位时间内如重新触发，重新计时，时间到执行

        function debounce(timeout, fn) {
            let _time = null
            return function() {
                let _arg = arguments
                clearTimeout(_time)
                _time = setTimeout(() => {
                    fn.apply(this, _arg)
                }, timeout)
            }
        }
        // 节流函数：节流就是单位时间内只执行一次，时间内触发不做任何操作，到时间以后更改flag可以重新触发
        function throttling(time, fun) {
            let flag = false;
            return () => {
                if (flag) {
                    return null
                }
                flag = true
                    // 先调用，在节流
                fun.apply(this, arguments)
                setTimeout(() => {
                    // fun.apply(this,arguments)// 先节流，在调用
                    flag = false
                }, time);
            }
        }

        function handleDebounce() {
            console.log("已防抖，请执行操作");
        }

        function handleThrottling() {
            console.log("已节流，请执行操作");
        }
        document.querySelector('.buttonDebounce').addEventListener('click', debounce(500, handleDebounce))
        document.querySelector('.buttonThrottling').addEventListener('click', throttling(1500, handleThrottling))
    </script>
</body>

</html>

AF01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
节流防抖，简单快速理解

<!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>防.
复制链接

扫一扫