防抖与节流

最新推荐文章于 2023-09-25 19:58:54 发布

qaq8_qaq

最新推荐文章于 2023-09-25 19:58:54 发布

阅读量92

点赞数

文章标签： java 服务器前端

本文链接：https://blog.csdn.net/qaq8_qaq/article/details/127337760

版权

一丶防抖

1.什么是防抖

在某一触发事件上过于频繁，但其实只需要触发一次就可以完成；这时我们可以用到防抖，只需要进行最后一次事件的操作。

2.防抖的代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <script>
        let inp = document.querySelector('input')
        inp.oninput = debounce(function(){
            console.log(this.value)
        },500)

        //利用闭包来构建一个防抖的函数
        function debounce(fn,delay){
            let t = null;
            return function(){
                if(t !== null){
                    clearTimeout(t);
                }
                t = setTimeout(()=>{
                    fn.call(this)
                },delay)
            }
        }
    </script>
</body>
</html>

3.防抖的应用场景

        1.登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖。
        2.文本编辑器实时保存，当无任何更改操作一秒后进行保存。
        3.DOM 元素的拖拽功能实现。
        4.计算鼠标移动的距离。

二丶节流

1.什么是节流

当某个操作是连续性执行的时候，我们通过某种方式，降低该操作的执行效率，这就是节流

2.节流的代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 2000px;
        }
    </style>
</head>
<body>
    <script>
        window.onscroll = throttle(function(){
            console.log('hello')
        },500);

        function throttle(fn,delay){
            let flag = true;
            return function(){
                if(flag){
                    setTimeout(()=>{
                        fn.call(this);
                        flag = true;
                    },delay)
                }
                flag = false;
            }
        }
    </script>
</body>
</html>

3.节流的应用场景

1.scroll 事件，每隔一秒计算一次位置信息等。
2.浏览器播放事件，每隔一秒计算一次进度信息等。
3.input框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求