函数节流和防抖动

节流和防抖动


节流和防抖动大家都在讲,我也就随便写下自己的理解用作记录,并没有什么高论

节流用在滚动条滚动onscroll和页面被调整onresize这种频繁触发事件的情况,可能一秒几十次的触发,然后在肉眼看来函数执行那么多次并没有多大区别,所以用节流的方式来控制触发的频率。
节流的用法,可以用settimeout来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="e" >
        <div class="ae" style="height:400px" >

        </div>
    </div>
</body>
</html>
<script>
    var a = document.querySelector('.e')
    a.onscroll = b
    var is = true

    function aa(){
        if(!is){
        r    eturn
        }
        is = false
        setTimeout(
            ()=> {
                console.log('节流')
                is = true
            },300
        )
    }
</script>
<style>
.e{
    overflow: auto;
    height: 100px;
    width: 100px;
    border: 1px solid rebeccapurple
}
</style>

猜你喜欢

转载自www.cnblogs.com/wzcsqaws/p/10578230.html
今日推荐