防抖节流

最新推荐文章于 2023-04-06 10:51:30 发布

勇敢牛牛，冲冲冲

最新推荐文章于 2023-04-06 10:51:30 发布

阅读量130

点赞数

分类专栏：面试题文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_44613011/article/details/120387622

版权

面试题专栏收录该内容

15 篇文章 1 订阅

订阅专栏

防抖节流

1.防抖

1.1防抖概念：

当事件出发之后，预定单位时间（比如1s）之后执行里面的代码；
如果在单位时间内再触发了事件，那么要重新计时，以保证事件里面的代码只执行一次。

1.2防抖案例：

<body>
  <button>注册</button>
  <script>
    let timer=null
    document.querySelector('button').onclick=function(){
      // 每次进入清空之前的定时器，重新开始计时，直到最后一次点击执行
      clearTimeout(timer)
      timer=setTimeout(function(){
        console.log(1)
        console.log(2)
        console.log(3)
        console.log(4)
        console.log(5)
        console.log(6)
      },1000)
    }
  </script>
</body>

执行结果：多次点击，只执行最后一次
在这里插入图片描述

1.3搜索框节流案例：

<!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>02-taobao</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #box {
            width: 500px;
            margin: 20px auto;
        }
        
        ul,
        li {
            list-style: none;
        }
        
        input {
            width: 100%;
            height: 26px;
            line-height: 26px;
        }
        
        li:hover {
            background-color: beige;
        }
        
        ul {
            display: none;
        }
    </style>

</head>

<body>
    <div id="box">
        <input type="text" id="ipt">
        <ul>

        </ul>
    </div>

    <script src="./jquery.js"></script>
    <script>
        // 获取元素
        let timer = null
        $('#ipt').on('keyup', function() {
            clearTimeout(timer)
            let keyword = $(this).val()
            if (keyword === '') {
                return $('ul').empty().hide()
            }
            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>

</html>

2.节流

2.1节流的概念

如果持续的触发同一个事件，每间隔一段时间，只会执行一次该事件，稀释事件的执行频率。
请添加图片描述

2.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>03节流</title>
    <style>
        html,
        body {
            height: 100%;
        }
        
        img {
            position: absolute;
        }
    </style>
</head>

<body>
    <img src="./angel.gif" alt="">
    <script src="./jquery.js"></script>
    <script>
        let timer = null
        $(document).on('mousemove', function(e) {
            if (timer !== null) return
            timer = setTimeout(() => {
                let x = e.pageX
                let y = e.pageY
                $('img').css({
                    left: x + 'px',
                    top: y + 'px'
                })
                console.log(x, y)
                    // 鼠标移动一次后重新设为0，为了不影响下次创建定时器
                timer = null
            }, 30)
        })
    </script>
</body>

</html>