js的抖动及防抖和节流

当前位置:

首页 > temp > JavaScript教程 >

js的抖动及防抖和节流

js的抖动

　　　在 js 中改变窗口大小 & 上下滚动滚动条 & 反复向输入框中输入内容 ... , 如果绑定了相应的事件 , 这些事件的触发频率非常高, 严重影响用户体验和服务器的性能 , 这种问题在js中就叫 js 的抖动 .

解决方法 : 防抖 & 节流

js的防抖

就是在在持续触发的过程中不会执行对应的函数 , 当触发停止一段时间后再执行对应的函数

具体就是在触发事件中设置一个定时器来延迟对应函数的生效 ,只有当两次触发事件的间隔时间能够触发定时器才会使对应函数生效

   　<style>

       .mybox {

            width: 600px;

            height: 1500px;

            background-color: pink;

            margin: 0 auto;

        }

    </style>

</head>

<body>

    <div class="mybox"></div>

</body>

<script>

    var timer;

    window.onscroll = function () {

        if (timer) {

            clearTimeout(timer)

        }

        timer = setTimeout(() => {

            console.log('我滚啦')

        }, 1000)

    }

</script>

js的节流

当持续触发事件时，每隔固定的时间也要调用一次函数

就是给对应函数设置一个触发的条件 , 每次触发记录下当前的时间戳

当两次获取的时间戳的差值满足条件时将执行对应的函数 , 并且将当前的时间记为初次获取的时间戳

　    <style>

      .mybox {

            width: 600px;

            height: 1500px;

            background-color: pink;

            margin: 0 auto;

        }

    </style>

</head>

<body>

    <div class="mybox"></div>

</body>

<script>

    function fn() { //执行函数

        console.log('我滚啦')

    }

    function throttle(wait, func) {

        var beginTime = Date.now()

        return function () {

            var currentTime = Date.now()

            var space = currentTime - beginTime

            if (space >= wait) {

                func()

                beginTime = Date.now()

            }

        }

    }

    window.onscroll = throttle(1000, fn)

</script>

栏目列表