(面试常见问题2) js中的防抖与节流

JavaScript 重点 ——防抖与节流(巧用定时器)

一 、防抖

1.含义: 事件触发后,等待规定时间后执行事件处理函数函数的情况下.但是在等待的过程中再次触发该事件,则将重新计时.

2.图解

3.详解:

​ 假设某事件被触发了,需要等待2000ms后执行回调函数.但是当在这2000ms内,再次触发了该事件,则将重新计时!4.

4.引入代码

<input type="text" name="" id="">
<script>
    let inp = document.querySelector('input')
    let timer = null  //设置一个空对象用于保存定时器
    inp.oninput = function () {
        // 事件处理函数,输入框的每一次输入事件都会触发回调函数
        // 若在100ms时间内,连续触发input事件,
        //则除第一次开新的定时器,定时器开启前需要先清除前一个定时器,
        	//确保每一次触发事件都能够重新计时
        if (timer) {
            clearTimeout(timer)
            timer = setTimeout(function () {
                console.log(inp.value);
            }, 100)
        } else {
            timer = setTimeout(function () {
                console.log(inp.value);
            }, 1000)
        }
    }
</script>

5.使用场景:输入框的防抖

二、节流

1.含义: 事件触发后,等待规定时间后执行事件处理函数函数的情况下.但是在等待的过程中再次触发该事件,在 不给于处理.

2.图解

3.代码详解

let timer = null
inp.oninput = function () {
    // 若在100ms时间内,连续触发input事件,确保在100ms时间内,
    //只能执行一次回调函数,第一次触发后执行的的回		
    //调函数可以被正常执行,而这在100ms有事件触发的回调函数全部不得执行!
    if (timer) {
        return
    } else {
        timer = setTimeout(function () {
            console.log(inp.value);
        }, 1000)
    }
}

4.使用场景:图片跟随鼠标效果

三、两者的共同优点

大大提高了程序的性能，减少了不必要的内耗。减少AJAX的请求次数,有利于减少服务器的资源浪费