[教程]javascript中的防抖与节流

防抖与节流无论是在我们工作中，还是面试时面试官都会问到这一方面的知识。那防抖与节流到底是什么呢？它们两者之间又有什么区别呢？今天就跟大家聊聊防抖与节流。1. 防抖防抖原理：一定时间内，只有最后一次操作...

防抖与节流无论是在我们工作中，还是面试时面试官都会问到这一方面的知识。那防抖与节流到底是什么呢？它们两者之间又有什么区别呢？今天就跟大家聊聊防抖与节流。

1. 防抖

防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数。

大白话：在一定时间内（我们设定时间内），我们触发n次都不会执行业务代码，只有在最后一次触发，还需再过wait毫秒（我们设置的时间）才会执行业务代码。

实际应用场景：例如我们可以利用防抖处理用户重复点击按钮这个操作；同时也可以处理用户输入框，获取输入内容的操作。等等...

代码实现：

html部分

<button onclick="getclick()">防抖</button>

js部分

let timer = null;
        function getclick(){
            timer!== null && clearTimeout(timer);
            timer = setTimeout(function(){
                console.log('执行业务')
            },1000)
            
        }

2. 节流

节流原理：在一定时间内，只能触发一次。

大白话：其实就字面上的意思，在一定时间内（我们设定时间内），只能触发一次。也就是说在这段时间内，无论我们操作多少次，都只能触发一次。

实际应用场景：例如我们获取滚动条位置的时候可以通过节流的方式，降低计算的频率。等等...

代码实现：

js部分

function perpetual(){
            let flag = false;
            setInterval(() => {
                console.log('一秒执行一次')
                if(!flag){
                    flag = true;

                    let time = setTimeout(function(){
                        console.log('执行业务代码');
                        flag = false;
                        clearTimeout(time)

                    },5000)
                }
               
            }, 1000);
        }

        perpetual();

3. 防抖与节流的区别

在我们面试的时候，面试官常常会问到他们之间的区别。说区别之前我们先说说它们的相似点，它们的使用常常都是为应对，某些事件持续频繁触发，使前端性能下降做的处理。它们两者间主要的区别在与应用场景的不同，节流会不断触发，主要应用在一些不断触发的场景，降低触发频率；防抖最后一次触发，主要应用在防止重复频繁点击，获取最终结果的场景。