防抖和节流

最新推荐文章于 2023-10-22 23:31:01 发布

天涯各一方&

最新推荐文章于 2023-10-22 23:31:01 发布

阅读量428

点赞数

分类专栏：笔记文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/loulansd/article/details/122460549

版权

笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一.防抖（debounce）:

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

举例:如果我们需要用ajax实现input输入框提示内容,没有做防抖的话我们每此输入(oninput事件)都需要给服务器发送数据,这样会造成大量的数据请求,给服务器造成压力

应用场景:

那么我们怎么才能实现防抖功能呢

需求:

1.我们需要在用户输入数据后提交数据给后台,所以我们需要用到oninput事件

2.应为oninput事件,只要用户输入了就会执行,所以用户连续输入的时候我们不提交数据给服务器,只有超过一定时间没有输入的时候我们在提交数据

代码演示:

外部文件:

html部分定义了一个input用户输入的时候发送数据给服务器

js部分:

 let timeID = null
        $('.ipt').on('input', function () {
            // 清楚定时器
            clearTimeout(timeID)
            //非空判断
            if ($('.ipt').val().trim() == '') {
                return
            }
            // 调用函数发送请求
            timeID = setTimeout(() => qingqiu($('.ipt').val()), 500)
        })

        function qingqiu(kw) {
            axios({
                url: 'XXXX', //后端地址
                method: 'get',
                params: {
                    q: kw
                }
            }).then(({
                data: res
            }) => {
                //输出
                console.log(11);
            });
        }

注释:ajax由于自搭建服务器所以地址就不放在上面了

1.每当用户输入的时候都会终止上一次的定时器,避免连续输入多次请求.

2.用户超过500毫秒没有输入的时候就会发送get请求给服务器,服务器响应后显示提示内容

控制台效果展示:

每次输入过后需要等待500毫秒后才会发送数据给服务器,让服务器响应

二.节流（throttle）

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。

代码演示:

html+css部分:

<style>
        .w {
            display: flex;
            width: 100%;
            height: 100px;
            border: 1px solid #000;
            background-color: antiquewhite;
        }

        .w div {
            width: 100px;
            height: 100%;
            background-color: aqua;
            position: relative;
        }
    </style>
</head>

<body>
    <div class="w">
        <div class="box"></div>
    </div>
    <input type="button" value="开始">
</body>

js部分:

 $(function () {
        $('input').on('click', function () {
            const newBall = $('<div class="box"></div>')
            // 2. 添加到页面的盒子中
            $('.w').append(newBall)
            // 3. 执行动画
            $(newBall).animate({
                left: '95%'
            }, 1000, 'linear', function () {
                // 当动画完成之后，移除
                $(this).remove()
            })
        })
    })

如果按照代码执行的话,点击多次会有多个盒子一直出来,我们要做的需求是:

连续触发事件但是只执行一次函数。

接下来我们简单修改一个js代码

//声明变量
    let flag = true
    $(function () {
        $('input').on('click', function () {
            // 只有为true是才会触发动画事件
            if (!flag) return
            //触发钱设置为false
            flag = false
            const newBall = $('<div class="box"></div>')
            // 2. 将子弹添加到页面的盒子中
            $('.w').append(newBall)
            // 3. 执行动画
            $(newBall).animate({
                left: '95%'
            }, 1000, 'linear', function () {
                // 当动画完成之后，移除
                $(this).remove()
                // 本次动画指向完毕后改为true
                flag = true
            })
        })
    })

效果展示: