防抖与节流方法

最新推荐文章于 2023-06-23 20:38:57 发布

SEVEN-17

最新推荐文章于 2023-06-23 20:38:57 发布

阅读量296

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/SEVEN_17_/article/details/120081391

版权

1、防抖：重复触发、代码不执行、重新计时、直到最后一次触发结束后代码才开始执行，当事件触发之后，约定单位时间（比如1s）之后，执行里面的代码；如果在单位时间只内再次触发了事件，那么要重新计时，以保证事件里面的代码只执行一次。

利用定时器解决防抖：

<body>
    <div id="box">
        <input type="text" id="ipt">
        <ul></ul>
    </div>
    <script src="./jquery.js"></script>
    <script>
        let timer = null
        $('#ipt').on('keydown', function () {
            clearTimeout(timer)
            let keyword = $(this).val();
            if (keyword === '') {
                $('ul').empty().hide();
                return
            };
            timer = setTimeout(function () {
                $.ajax({
                    url: 'https://suggest.taobao.com/sug',
                    data: {
                        q: keyword,
                        code: 'utf-8'
                    },
                    dataType: 'jsonp',
                    success: function (res) {
                        let str = '';
                        res.result.forEach(item => {
                            str += `<li>${item[0]}</li>`
                        })
                        $('ul').html(str).show()
                    }
                })
            }, 1000)
 
        })
    </script>
</body>

防抖的应用场景：

（1）浏览器窗口缩放，resize事件，常见应用于需要实现页面适配时

（2）表单的按钮提交事件，例如登录，发短信，避免用户点击过快，以至于发送多次请求

（3）search搜索框输入时，需要用户最后一个输入后，再发送ajax请求

（4）文本编辑器实时保存，当没有任务修改1S后进行保存

2、节流:（在规定单位时间内代码只能运行一次）当事件触发之后，约定单位时间之后，事件里面的代码最多只能执行1次，所以，节流减少了单位时间内代码的执行次数，从而提高性能（利用定时器）。

<body>
<img src="1.jpg">
<script src="./jquery.js"></script>
<script>
let timer=null
$(document).on('monusemove',function(e){
if(timer!==null) return
timer=setTimerout(()=>{
let x=e.pageX
let y=e.pageY
$('img').css({left:x+'px',top:y+'px'})
timer=null
},100)
})
 
</script>
</body>

利用的应用场景：

(1)、鼠标事件

（2）、商品预览的放大镜效果（鼠标在小图上移动，大图没必要实时展示）

（3）、scroll事件，每间隔1s的时间，重新计算当前的位置信息

SEVEN-17

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖与节流方法

1、防抖：重复触发、代码不执行、重新计时、直到最后一次触发结束后代码才开始执行，当事件触发之后，约定单位时间（比如1s）之后，执行里面的代码；如果在单位时间只内再次触发了事件，那么要重新计时，以保证事件里面的代码只执行一次。利用定时器解决防抖：<body> <div id="box"> <input type="text" id="ipt"> <ul></ul> </div>
复制链接

扫一扫