当前位置：网站首页>js函数防抖和函数节流及其使用场景。

js函数防抖和函数节流及其使用场景。

2022-08-03 09:49:00 【笨笨鱼爱吃糖】

    //防抖函数

    function debounce(callback, time = 300) {

        let i;

        return function () {

            clearTimeout(i);

            i = setTimeout(callback, time);

        }

    }

    //绑定滚动条事件

    window.onscroll = debounce(function () {

        console.log("调用了一次");

    }, 500);

滚动条实际案例

<style>

    * {

        padding: 0;

        margin: 0;

    }

    #returntop {

        position: fixed;

        bottom: 100px;

        right: 30px;

        display: none;

    }

    .con {

        width: 100%;

        height: 5000px;

        background: gainsboro;

    }

</style>

<body>

    <div id="returntop">

        <img src="/web/img/returntop.png">

    </div>

    <div class="con"></div>

</body>

<script>


 

    function debounce(callback, time = 300) {

        let t;

        return function () {

            clearTimeout(t);

            t = setTimeout(callback, time);

        }

    }


 

    window.onscroll = debounce(function () {

        hide();

    }, 500);


 

    function hide() {

        console.log("调用一次");

        let num = document.body.scrollTop || document.documentElement.scrollTop;

        if (parseInt(num) >= 400) {

            document.getElementById("returntop").style = "display:block";

        } else {

            document.getElementById("returntop").style = "display:none";

        }

    }


 

    // window.onscroll = function(){

    //     // console.log(document.body.scrollTop);

    //     // console.log(document.documentElement.scrollTop);

    //     let num = document.body.scrollTop || document.documentElement.scrollTop;

    //     if(parseInt(num) >= 400){

    //         document.getElementById("returntop").style = "display:block";

    //     }else{

    //         document.getElementById("returntop").style = "display:none";

    //     }

    // }

</script>

函数节流

    function throlle(callback,time) {

        let lasttime = new Date().getTime();

        return function () {

        let now = new Date().getTime();

            if (now - lasttime > time) {

                callback();

                lasttime = now;

            }

        }

    }

    window.onscroll = throlle(function () {

        console.log("调用了一次");

    }, 1500);

登录时的实际案例

document.getElementById("login").onclick = throlle(login,5000);

    function throlle(callback, time) {

        let lasttime = new Date().getTime();

        return function () {

            let now = new Date().getTime();

            if (now - lasttime > time) {

                callback();

                lasttime = now;

            }

        }

    }

原网站

版权声明
本文为[笨笨鱼爱吃糖]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_42559756/article/details/126124411

边栏推荐

猜你喜欢

随机推荐