怎样使用节流函数让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函数可以防止抖动。

    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时间内只调用一次，避免在短时间内触发太多次函数引起性能问题