防抖和节流

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

一.防抖(debounce函数)

在规定的时间内只触发一次 （频繁触发事件时，控制执行的次数,即使不停的点击也会触发，在规定的间隔时间只要点击就会触发）

应用场景：

①。输入框中频繁输入内容，搜索，提交信息等

②。频繁点击按钮，触发事件

③。监听浏览器滚动事件，完成特定操作

④。用户缩放浏览器的滚动条事件

        //节流：   在规定的时间内只触发一次
    let time1 = null
    $(".box1").click(function () {
        let time2 = new Date()
        if (time2 - time1 >= 2000) {
            console.log("呀，你点我干嘛")
            time1 = new Date()
        }
    })
     

封装防抖函数：

  <input type="text" name="" id="">
<script src="./jquery/jquery.js"></script>
<script>
    let inp = document.querySelector("input")
    // 防抖     
    inp.oninput = debounce(function(){
        console.log(this.value);
    },500)
    // fn,回调函数，执行语句
    // delay   延迟的时间事件
    function debounce(fn,delay){
        let time = null
        return  function(){
            if (time !== null) {
                clearTimeout(time)
            }
            time = setTimeout(() =>{
                // console.log(this.value);
                // 需要改变this执行，否者input输入内容为空
                // 因为 input 调用封装函数时指向的是调用者
                fn.call(this)
            },delay)
        }
    }
</script>

二。节流(throttle函数)

触发后要停上一定的时间后再次触发(如果用户一直点击不停下来就不会再次触发，除非点击之后停止，间隔规定的时间之后再次点击才会触发)

应用场景:

①。监听页面的滚动事件

②。鼠标移动事件

③。频繁点击按钮操作

④。以及一些游戏中的设定

              let time3=null
    //防抖：触发后要停上一定时间后再次触发
    $(".box2").click(function () {
        let time4 = new Date()
        if (time4 - time3 >= 2000) {
            console.log("防抖呀，你点我干嘛")
        
        }
        time3 = new Date()
    })
    
    点击之后暂停两秒再次点击才会触发，如果一直点击没有停下来两面钟则不会再次触发

封装节流函数

         <script src="../jquery.js"></script>
<script>
    window.onscroll = throttle(function () {
        console.log(1111)
    },500)
    // onscroll   滚动条触发事件
    function throttle(fn, delay) {
        let flag = true
        return function () {
            if (flag) {
                setTimeout(() => {
                    fn.call(this)
                    flag = true
                }, delay)
            } flag = false
        }
    }

</script>