函数节流和防抖动

最新推荐文章于 2021-11-01 12:15:14 发布

weixin_30588907

最新推荐文章于 2021-11-01 12:15:14 发布

阅读量75

点赞数

原文链接：http://www.cnblogs.com/wzcsqaws/p/10578230.html

版权

节流和防抖动

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

节流用在滚动条滚动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>

防抖动

防抖动和节流容易搞混，他们的区别是节流是隔一段时间就会触发一次，防抖动是每次触发都会刷新延时，只有最后一次触发的完了，才能延时结束执行，最经典的2个例子就是表单，填写的时候用防抖动
控制事件不触发，等填写完时再触发相应事件，还有一个搜索框动态搜索，可能你在输入框打字的时候并不会触发，当你打完或者停下来的时候就会自动搜索，请看代码和图片

<!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>
    <input type="text" class="e">
    <div class="aa"></div>
</body>
</html>
<script>

var a = document.querySelector('.e')
a.oninput = aa //对支持oninput的浏览器用oninput，其他浏览器（IE6/7/8）使用onpropertychange
a.onpropertychange = aa
var is 
function aa(){
    clearTimeout(is)
    is = setTimeout(
        ()=> {
            var text = document.querySelector('.e')
            var div = document.querySelector('.aa')
            div.innerHTML = `自动帮你搜索到： ${text.value}`
        },500
    )
}
</script>

转载于:https://www.cnblogs.com/wzcsqaws/p/10578230.html

weixin_30588907

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
函数节流和防抖动

节流和防抖动节流和防抖动大家都在讲，我也就随便写下自己的理解用作记录，并没有什么高论节流用在滚动条滚动onscroll和页面被调整onresize这种频繁触发事件的情况，可能一秒几十次的触发，然而在肉眼看来函数执行那么多次并没有多大区别，所以用节流的方式来控制触发的频率。节流的用法，可以用settimeout来实现，请看代码和图片<!DOCTYPE html><htm...
复制链接

扫一扫