防抖，节流

最新推荐文章于 2022-08-27 22:53:51 发布

啥时候能干全栈

最新推荐文章于 2022-08-27 22:53:51 发布

阅读量129

点赞数

分类专栏：前端知识点

本文链接：https://blog.csdn.net/qq_42177478/article/details/105521709

版权

前端知识点专栏收录该内容

30 篇文章 1 订阅

订阅专栏

前端开发中频繁的触发事件执行，对于DOM操作，资源加载等耗费性能的处理，很可能导致页面卡顿，甚至浏览器崩溃。函数节流和防抖应运而生。

防抖

<body>
    <input type="text" id="inp"></input>
 </body>
<script>
    var oInp = document.getElementById('inp')
    var timer = null,
    function  debounce(handler,delay) {
        return function(){
            var _self = this,
            _args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function(){
                handler.apply(_self,_args);
            },delay)
        }
}
    function ajax(e){
        console.log(e,this.value)

    }
    oInp.oninput = debounce(ajax,1000);

节流

就是预定一个函数只有在大于等于执行周期的时候才执行，周期内调用不执行。
窗口调整，页面滚动，疯狂点击。

<body>
    <div class="show">0</div>
    <button class="btn">click</button>
</body>
<script>
     var oDiv = document.getElementsByClassName('show')
     var oBtn = document.getElementsByClassName('btn')
     function throttle(handler,wait){
         var lastTime = 0;
         return function(e){
             var nowTime = new Date().getTime();
             if(nowTime-lastTime > wait){
                 handler.apply(this,arguments);
                 lastTime = nowTime;
             }
         }

     }
     function buy(e){
         console.log(this,e)
         oDiv.innerText = parseInt(oDiv.innerText) + 1;
     }
    oBtn.onclick = throttle(buy,1000);
</script>

啥时候能干全栈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
防抖，节流

前端开发中频繁的触发事件执行，对于DOM操作，资源加载等耗费性能的处理，很可能导致页面卡顿，甚至浏览器崩溃。函数节流和防抖应运而生。防抖<body> <input type="text" id="inp"></input> </body><script> var oInp = document.getElement...
复制链接

扫一扫