函数节流与防抖(闭包的使用场景)

节流的定义与使用原因

节流就是保证一段时间内只执行一次核心代码

因为oninput,onkeypress,onscroll,resize这些事件触发频率非常高，那么如果在这些事件触发时执行代码，就会相应的将代码块执行很多次。但是通常大量的重复执行是没有必要的，节流是优化高频率执行js代码的一种手段

 
 //节流代码
var type = false;
window.onscroll = function(){
    if(type === true) return;
    type = true;
    setTimeout(()=>{
        console.log("要执行的事");
        type = false;
    },5000)
}
//固定周期内，只执行一次动作，若有新事件触发，不执行。周期结束后，又有事件触发，开始新的周期

// 节流
function throttle(fn, delay = 100) {
    let timer = null

    return function () {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

div1.addEventListener('drag', throttle(function (e) {
    console.log(e.offsetX, e.offsetY)
}))

div1.addEventListener('drag', function(event) {

})

函数节流使用场景

一般是onsize，onscroll、oninput,onkeypress,onscroll,resize等这些频繁触发的函数，比如你想获取滚动条的位置，然后执行下一步动作

防抖和节流有什么区别

防抖的定义与使用原因

• 防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流(只执行第一次)是将多次执行变成每隔一段时间执行。

思路：每次触发事件时都判断当前是否有等待执行的延时函数

//防抖代码
var timer = null;
function click(){
    clearTimeout(timer);
    timer = setTimeout(()=>{
        ajax(...);
    },5000)
}
//实现原理：如果在500ms内频繁操作点赞或者取消点赞，则每次都会清除一次定时器然后重新创建一个。直到最后一次操作点赞或者取消点赞，然后等待500ms后发送ajax

// 防抖
function debounce(fn, delay = 500) {
    // timer 是闭包中的
    let timer = null;
    console.log("debounce");

    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null;
            console.log("set");
        }, delay);
    };
}

input1.addEventListener( "keyup", debounce(function (e) {
        // console.log(e.target);
        // console.log(input1.value);
    }, 2000)
);

函数防抖使用场景

• 表单重复提交