防抖和节流

一、防抖：用户触发时间过于频繁,只要最后一次请求的操作

原因：前后端数据交互频率过高，导致流量浪费。 界面高频率渲染更新，引发页面延迟、卡顿或假死等状况，影响体验。

场景：搜索功能，控制input标签的交互次数

函数防抖

    let input = document.querySelector('input')
    input.oninput = debounce(function() {
        console.log(this.value)
    },500) 
    function debounce(fn, delay) { //防抖函数，防抖和业务逻辑分离（闭包）
        let t = null
        return function () {
            if (t !== null) {
                clearTimeout(t)//重点记得清空
            }
            t = setTimeout(() => {
                fn.call(this);//更换this指向问题
            }, delay);
        }
    }

二、节流：限制一个函数在一定时间内只能执行一次（控制执行次数）

原因：如果操作DOM元素，界面高频率渲染更新，引发页面延迟、卡顿或假死等状况，影响体验。如果重复访问接口，重复的 ajax 调用不仅可能会造成请求数据的混乱，还会造成网络拥塞，占用服务器带宽，增加服务器压力。

场景：懒加载、滚动加载、加载更多或监听滚动条位置；百度搜索框，搜索联想功能；防止高频点击提交，防止表单重复提交；

函数节流

        let flag= true 
        window.onscroll =throttle(function() {
            console.log("节流")
        },500) 
        function throttle(fn, delay) {
            let flag= true 
            if(flag){
                setTimeout(() => {
                    fn.call(this);//更换this指向问题
                    flag = true
                }, delay);
            }
            flag =false
        }

两者的区别：函数防抖一定时间连续触发的事件,只在最后执行一次，而函数节流一段时间内只执行一次。