节流和防抖

2021-02-22 16:32:12 阅读：183 来源： 互联网

防抖(debounce)

防抖的含义就是让某个时间期限（如1000毫秒）内，短时间内连续触发的事件，但事件处理函数只执行一次。

<!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 id="btn" style="height: 30px; width: 100px; background-color:red;"></button>
    <script>
        function debounce(fn, delay) {
            //记录上次的延时器
            let timer = null

            return function() {
                //清除上次的延时器
                clearTimeout(timer)

                timer = setTimeout(
                    function() {
                        fn.apply(this)
                    }, delay)
            }
        }
        document.getElementById('btn').onclick = debounce(
            function() {
                console.log('点击按钮事件触发，at Date', Date.now());
            }, 1000)
    </script>
</body>

</html>

节流(throttle)

如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

<!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 id="btn" style="height: 30px; width: 100px; background-color:red;"></button>
    <script>
        function throttle(fn, delay) {
            //记录上次的延时器
            let lastTime = 0

            return function() {
                let nowTime = Date.now()
                if (nowTime - lastTime > delay) {
                    fn.apply(this)
                    lastTime = nowTime
                }
            }
        }
        document.getElementById('btn').onclick = throttle(
            function() {
                console.log('点击按钮事件触发，at Date', Date.now());
            }, 2000)
    </script>
</body>

</html>

标签：function,防抖,节流,delay,延时器,Date,fn
来源： https://www.cnblogs.com/kawayi/p/14431092.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

节流和防抖

防抖(debounce)

节流(throttle)