js函数的防抖与节流

最新推荐文章于 2023-04-11 19:12:50 发布

汪金威

最新推荐文章于 2023-04-11 19:12:50 发布

阅读量108

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/csdnwangjinwei/article/details/129511055

版权

函数的防抖：

函数防抖和函数节流都是为了优化高频率触发事件的触发

用途有如下：

1. 搜索框搜索输入，只需用户最后一次输入完，再发送请求
2. 用户名、手机号、邮箱输入验证
3. 浏览器窗口大小改变后，只需窗口调整完后，再执行 resize 事件中的代码，防止重复渲染
4. 懒加载、滚动加载、加载更多或监听滚动条位置
5. 百度搜索框，搜索联想功能
6. 防止高频点击提交，防止表单重复提交

防抖使用了Lodash，中文文档：https://www.lodashjs.com/

语法： _.debounce(func要防抖动的函数, [wait需要延迟的毫秒数=0], [options选项对象=])

<!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>
        #container {
            width: 600px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: #fff;
            background-color: #444;
            font-size: 20px;
            margin: 100px auto;
            box-shadow: 10px 10px 10px #b3b3b3, -25px -25px 50px #ffffff;
            border-radius: 12px;
            background-color: #f56c11;
        }
    </style>
</head>

<body>
    <div id="container"></div>

    <!-- 1-引入lodash第三方js库(全局下多个_ ,代表lodash对象) -->
    <script src="./js/lodash.min.js"></script>
    <script>
      // 2-获取div的dom对象
        var container = document.getElementById("container");

        // 3-计数器变量
        var count = 0;

        // 4-封装fn函数
        function fn(e) {
            // 5-计数器变量自加1
            count++;

            console.log("e事件对象=>", e);
            console.log("this对象=>", this);
          
            // 6-设置container的标签内容
            this.innerText = "触发了" + count + "次事件,当前鼠标在盒子内坐标为" + e.offsetX + "," + e.offsetY;
        }

        // container.onmousemove = fn;
        container.onmousemove = _.debounce(fn, 200);
    </script>
</body>

</html>

函数的节流：

节流的意思是让函数有节制地执行，什么叫有节制？就是在一段时间内，只执行一次

场景
1. DOM元素的拖拽功能实现
2. 射击游戏
3. 计算鼠标移动的距离
4. 监听scroll滚动事件

使用延时器完成节流函数：

<!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>
        #container {
            width: 600px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: #fff;
            background-color: #444;
            font-size: 20px;
            margin: 100px auto;
        }
    </style>
</head>


<body>
    <div id="container"></div>


    <script src="./js/lodash.min.js"></script>
    <script>
        var container = document.getElementById("container");


        // 计数器变量
        var count = 0;


        // 封装fn函数
        function fn(e) {
            // 自加1
            count++;


            console.log("e事件对象=>", e);
            console.log("this对象=>", this);
            console.log("");
            // 设置container的标签内容
            this.innerText = "触发了" + count + "次事件,当前鼠标在盒子内坐标为" + e.offsetX + "," + e.offsetY;
        }


        // 使用时间戳和延时器双剑合璧完成节流函数的第三版本
        // 目标:  使用时间戳和延时器双剑合璧完成节流函数的第三个版本  第一次触发,最后一次也触发


        /* container.onmousemove = _.throttle( fn, 2000, {
            leading:true,
            trailing:true
        }); */



        // 注意: 如果直接把时间戳和定时器的两个if相关代码合到一个函数中,但是不断触发事件的事件的时候,就会出现跳跃问题
        // 解决方法: 让两个if条件里面的代码互斥



        function myThrottle(func, wait) {
            // old表示旧的时间戳
            var old = 0;
            // 定义一个变量,保存this对象
            var thisArg = null;
            // 定义一个变量,保存实参列表
            var args = null;
            // 延时器标识符
            var timeout = null;


            return function () {
                // 把正确的this对象赋值给thisArg变量
                thisArg = this;
                // 把正确的arguments对象赋值给args变量
                args = arguments;


                // 获取当前时间戳
                var now = new Date().getTime();
                // 如果大于设置的时间周期，就执行函数，并更新时间戳为当前的时间戳，如果小于，就不执行。


                if (now - old > wait) {
                    // 执行函数,改变函数内部this指向,传递实参列表
                    func.apply(thisArg, args);
                    // 更新时间戳为当前的时间戳
                    old = now;


                    // 如果延时器存在
                    if (timeout !== null) {
                        // 清除延时器
                        clearTimeout(timeout);
                        // 重新设置timeout的值为null
                        timeout = null;
                    }
                }


                // 如果延时器存在，就不执行;
                // 如果延时器不存在，就执行;
                if (timeout === null) {
                    // 开启一个新的延时器
                    timeout = setTimeout(function () {
                        // 执行函数
                        func.apply(thisArg, args);
                        // 清空延时器标识符
                        timeout = null;


                        // 重新获取最新当前的时间戳
                        now = new Date().getTime();
                        // 更新时间戳为当前的时间戳
                        old = now;
                    }, wait);
                }
            }
        }
        container.onmousemove = myThrottle(fn, 2000);
    </script>
</body>


</html>