函数防抖与节流

最新推荐文章于 2024-07-28 20:27:10 发布

若水cjj

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量120

点赞数

分类专栏： # 其他文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/cjhxydream/article/details/126267943

版权

其他专栏收录该内容

3 篇文章 0 订阅

订阅专栏

函数防抖与节流

1. 卡顿现象

如果事件触发非常频繁就会出现卡顿，因为每一次触发，回调函数都要去执行(如果时间很短，而回调函数内部有计算，那么很可能会出现浏览器卡顿)

正常情况(用户拖动鼠标慢慢移动)：鼠标进入，每个一级分类都会触发鼠标进入事件

非正常情况下(用户操作很快)：本身全部的一级分类都应该触发鼠标进入事件，但是经过测试可以发现只有部分一级分类触发了

原因分析：就是用户行为过快，时间太短，没有给浏览器解析器留下充裕的时间，导致浏览器反应不过来，如果当前回调函数中有大量业务，有可能出现卡顿现象

请添加图片描述

2.函数防抖的理解

防抖：前面所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果快速连续的触发，只会执行一次

产生抖动

请添加图片描述

使用lodash消除抖动

请添加图片描述

<!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>
    <script src="./lodash.js"></script>
</head>
<body>
    <p>
        请输入搜索的内容：<input type="text">
    </p>
    <script>
        // 防抖：前面所有的触发都被取消，最后一次执行在规定的时间之后才会触发，
        // 也就是说如果快速连续的触发，只会执行一次
        let input = document.querySelector("input");

        // 未进行函数防抖
        // 文本发生变化立即执行
        // input.oninput = function(){
        //     console.log("发送ajax请求")
        // }

        /**
         * lodash插件：里面封装函数的防抖与节流(都用到了闭包和延时器)
         * lodash函数库对外暴露_函数
         * 
         */ 
        // 使用lodash进行函数防抖
        // console.log(_)
        input.oninput = _.debounce(function(){
            console.log("发送ajax请求")
        }, 1000);
        
    </script>
</body>
</html>