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

Question

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

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

Answer 1

过了很久才想起这个提问，今天已经找到了方法了，使用Debouncing函数可以防止抖动。&nbsp; &nbsp; function Debouncing(fn,delay){&nbsp; &nbsp; &nbsp; &nbsp; let timer = null;&nbsp; &nbsp; &nbsp; &nbsp; return function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //可以访问timer的闭包,下一次调用时直接使用clear之后再开启一个定时器,执行函数,以此类推&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let context = this;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let args = arguments;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clearTimeout(timer);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; timer = setTimeout(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fn.apply(context,args);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },delay);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }这个函数主要用到了闭包、作用域、定时器，在给定的delay时间内只调用一次，避免在短时间内触发太多次函数引起性能问题