javascript - 怎样使用节流函数让scroll事件的登录框不再抖动？

问题描述

问 题

<style>
    #div{
        width:800px;
        height:400px;
        border:10px solid #000;
        position:absolute;
        left:0;
        top:0;
        background-color:rgba(130,6,500,.9);
    }
</style>
<div id="div">
    
</div>
<script>
center();
function center(){
    var vw = document.documentElement.clientWidth;
    var vh = document.documentElement.clientHeight;
    var offset_W = div.offsetWidth;
    var offset_H = div.offsetHeight;
    var scrollTop = document.body.scrollTop;
    div.style.left = (vw - offset_W) / 2 + "px";
    div.style.top = (vh - offset_H) / 2 + scrollTop + "px";
}
window.addEventListener("scroll",center);
window.onresize = center;
</script>

当垂直滚动条下滑时,使用什么样的方法可以不让这个居中的登录框抖动？

解决方案

过了很久才想起这个提问，今天已经找到了方法了，使用Debouncing函数可以防止抖动。

    function Debouncing(fn,delay){
        let timer = null;
        return function(){
            //可以访问timer的闭包,下一次调用时直接使用clear之后再开启一个定时器,执行函数,以此类推
            let context = this;
            let args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function(){
                fn.apply(context,args);
            },delay);
        }
    }

这个函数主要用到了闭包、作用域、定时器，在给定的delay时间内只调用一次，避免在短时间内触发太多次函数引起性能问题

这篇关于javascript - 怎样使用节流函数让scroll事件的登录框不再抖动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！