js防抖和节流+闭包

我是大苹果1212

已于 2022-03-30 18:30:10 修改

阅读量613

点赞数 6

文章标签： javascript

于 2022-03-30 18:29:29 首次发布

本文链接：https://blog.csdn.net/qq_47666300/article/details/123845081

版权

防抖：不想频繁的调用代码

使用场景模拟：乘客出行准备乘坐大巴车，第一个乘客上车之后，大巴车规定等候10分钟，若在10分钟之内有人上车，那就再等10分钟，直到10分钟之内没有上车的，就立即发车。(最后一次生效)

实例：实时搜索功能，一般输入一个字请求一个接口，这样很消耗性能

        <input type="text" id="input"></input>
        <script>

            function func(){
                console.log('请求接口')
            }
            //第一个参数是业务代码，第二个是延迟时间
            //逻辑就是每次调用都会先清空定时器，然后再执行定时器，多次点击时
            //就会不断地创建清空，创建清空，直到最后一次点击时候，执行的延时没有被清空
            function debounce(fn,delay){
                let time = null
                return function(){
                    if(time){
                        clearTimeout(time)
                    }
                    time = setTimeout(()=>{
                        fn&fn();
                    },delay)
                }
            }
            document.getElementById('input').oninput = debounce(func,500);

        </script>

节流：有自己的频率取调用代码

使用场景模拟：乘客出行准备乘坐大巴车，第一个乘客上车之后，大巴车规定等候10分钟，无论重新上了几个乘客或者剩余几个作为都发车。（第一个生效）

    <body onscroll="onscroll()">
        <script>

            function func(){
                console.log('请求接口')
            }
            //flag只是一个标识，表示当前是否在执行
            //一开始进来时候是true，进到下面函数先是是变成false，
            //等延时过了才能变成true
            function throttle(fn,delay){
                let flag = true 
                return function(){
                    if(!flag){
                        return
                    }
                    flag = false;
                    setTimeout(()=>{
                        fn && fn();
                        flag = true;
                    },delay)
                }
            }

            const onscroll = throttle(fun,500)
        </script>
    </body>

闭包：

特点:1.函数嵌套函数2.内部函数引用外部函数变量，内部函数对象创建了，此时形成闭包

优点:1.可以读取函数内部的变量2.避免全局污染，

缺点:1.变量不会被垃圾清除机制清楚，导致大量的消耗内存

funsction fn1(){
  const a = 1;
  function fn2(){
    console.log(a)
  }
  fn2();
}
fn1();

我是大苹果1212

关注

6
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
js防抖和节流+闭包

防抖：不想频繁的调用代码使用场景模拟：乘客出行准备乘坐大巴车，第一个乘客上车之后，大巴车规定等候10分钟，若在10分钟之内有人上车，那就再等10分钟，直到10分钟之内没有上车的，就立即发车。(最后一次生效)实例：实时搜索功能，一般输入一个字请求一个接口，这样很消耗性能 <input type="text" id="input"></input> <script> function func(){
复制链接

扫一扫