原生JS【节流防抖】源码封装

最新推荐文章于 2024-04-10 10:35:04 发布

BlueSeaYo

最新推荐文章于 2024-04-10 10:35:04 发布

阅读量954

点赞数 1

分类专栏： JS源码功能封装文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_60619943/article/details/122777593

版权

JS源码功能封装专栏收录该内容

4 篇文章 0 订阅

订阅专栏

节流

<body>
    <div id="show">0</div>
    <button id="btn">click</button>
    <script>
        let oDiv = document.getElementById('show');
        let oBtn = document.getElementById('btn');
         // 封装节流函数
        // 作用：防止一个事件在规定时间内触发多次，容易造成浏览器崩溃现象、消耗不必要的资源...
        // 思路：
        // 1.首先throttle函数是一个回调函数且需要用到闭包理念
        // 2.定义throttle的两个形参
        // callback：作为发送请求后执行的代码=>ajax内的函数体
        // delay:作为设置触发定时器的时间
        //3.定义一个规定时间标识 lastTime作为记录下一次规定时间标识用
        //4.用闭包理念把规定时间标识和闭包函数作为两个单独作用域空间，目的是为了记录每次新的时间标识而不是每次时间标识为固定初始化的值
        function throttle(callback,wait){
            let lastTime=0;
            return function(){
                let nowTime=new Date().getTime();
                let that=this;
                if(nowTime-lastTime>wait){
                    clickBnt.apply(that,arguments)
                    lastTime=nowTime;
                }
            }
        }
        function clickBnt(){
            oDiv.innerHTML=parseInt(oDiv.innerHTML)+1;
        }
        oBtn.onclick=throttle(clickBnt,1000);
    </script>
</body>

防抖

<body>
    <input type="text" id="ipt">
    <script>
        // 模拟一段数据ajax请求
        let oIpt=document.getElementById('ipt');
        // let timer=null;
        function ajax(){
            console.log(this.value);
        }
        // 封装防抖函数
        // 作用：防止一个事件在规定时间内触发多次，容易造成浏览器崩溃现象、消耗不必要的资源...
        // 思路：
        // 1.首先debounce函数是一个回调函数且需要用到闭包理念
        // 2.定义debounce的两个形参
        // callback：作为发送请求后执行的代码=>ajax内的函数体
        // delay:作为设置触发定时器的时间
        //3.定义一个定时器标识 timer作为记录清除定时器标识用
        //4.用闭包理念把定时器标识和定时器事件代码作为两个单独作用域空间，目的是为了清除定时器时每次不是固定初始化的值
        function debounce(callback,delay){
            let timer=null;//定义一个定时器标识
            return function(){
                let that=this;//定义一个变量获取返回值函数的指向
                clearTimeout(timer);
                timer=setTimeout(function(){
                    ajax.apply(that,arguments)//把ajax函数指向到返回值函数=>返回值函数最终输出的就是ajax函数里的代码
                },delay)
            }
        }
        ipt.oninput = debounce(ajax,1000);
    </script>
</body>

BlueSeaYo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS【节流防抖】源码封装

节流<body> <div id="show">0</div> <button id="btn">click</button> <script> let oDiv = document.getElementById('show'); let oBtn = document.getElementById('btn'); // 封装节流函数 /.
复制链接

扫一扫