节流

<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>

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/11785.html

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

节流

防抖

相关推荐

发表回复