javascript中的防抖与节流。

Posted 2022-03-19 0314dxj

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript中的防抖与节流。相关的知识，希望对你有一定的参考价值。

1.什么是防抖？它有什么作用？

　　什么是防抖？相信行入门的小白，甚至做了一段时间的程序员也不太理解是什么意思，我也是听了公开课才了解一点，现在和大家分享一下我的理解！

　　函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。比如，在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕，请求的次数多了浏览器会造成卡顿或者是卡死的状态，为避免这个情况的发生可以使用防抖来减少请求的频率。

　　举个栗子：　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防抖和节流</title>
    <style>
        #app
            width: 400px;
            height: 200px;
            background: #ccc;
            text-align: center;
            line-height: 200px;
            font-size: 50px;
        
    </style>
</head>
<body>
    <div id=‘app‘></div>

    <script>
        let num = 1;
        let content = document.getElementById(‘app‘);

        function count() 
            content.innerHTML = num++;
        ;
        content.onmousemove = count;

    </script>
</body>
</html>

　　div 元素绑定了 mousemove 事件，当鼠标在 div（灰色）区域中移动的时候会持续地去触发该事件导致频繁执行函数，只要鼠标到元素中就会频繁的执行。

　　技术图片

　　添加防抖事件，所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

content.onmousemove = debounce(count,1000);

        function debounce(func, wait) 
            let timeout;
            return function () 
                let context = this;
                let args = arguments;

                if (timeout) clearTimeout(timeout);
        
                timeout = setTimeout(() => 
                    func.apply(context, args)
                , wait);

　　当你添加防抖事件后，鼠标再次移入元素内就不会出现上面的情况，只有鼠标移开后一秒后才执行（因为我设置的1s后执行）。

　　2.什么是节流？

　　　　当持续触发事件时，保证一定时间段内只调用一次事件处理函数。打个比方说节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。

　　　　所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

　　　　1.利用时间戳达到节流效果：

    content.onmousemove = throttle(count,1000);

    function throttle(func, wait) 
        let previous = 0;
        return function() 
                let now = Date.now();
            let context = this;
            let args = arguments;
            if (now - previous > wait) 
                    func.apply(context, args);
                    previous = now;

　　　　在持续触发事件的过程中，函数会立即执行，并且每 1s 执行一次。

　　2.定时器版:

    content.onmousemove = throttle(count,1000);

    function throttle(func, wait) 
            let timeout;
            return function() 
                let context = this;
                let args = arguments;
                if (!timeout) 
                            timeout = setTimeout(() => 
                            timeout = null;
                            func.apply(context, args)
                        , wait)

　　在持续触发事件的过程中，函数不会立即执行，并且每 1s 执行一次，在停止触发事件后，函数还会再执行一次，跟上面的效果是一样的，

　　其实这个方法看起来效果一样但还是有区别的，详细可以去看看这篇文章： https://www.jianshu.com/p/c8b86b09daf0

以上是关于javascript中的防抖与节流。的主要内容，如果未能解决你的问题，请参考以下文章

Js中的防抖与节流

JS的防抖与节流 -- springboot实战电商项目mall4j