前端防抖和截流（lodash）学习

最新推荐文章于 2024-03-07 23:22:31 发布

qq_40693602

最新推荐文章于 2024-03-07 23:22:31 发布

阅读量228

点赞数

文章标签：前端学习 html

本文链接：https://blog.csdn.net/qq_40693602/article/details/129834941

版权

01-防抖

02-截流

01-防抖

<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="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.min.js"></script>
</head>
<body>

    <p>
        输入框： <input type="text">
    </p>
    
    
</body>
</html>

<script>

let input = document.querySelector('input');

//前面所有的触发都取消 ，最后一次执行 在规定的时间之后才会触发
input.oninput = _.debounce(function() {
    console.log('ddddd')
}, 1000)

</script>

02-截流

<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="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.min.js"></script>

</head>
<body>
    <div>
        <h1>我是计数器 <span>0</span> </h1>
        <button>点我</button>
    </div>
    
</body>
</html>

<script>
    //截流 在规定时间 不会重复触发回调 只有大与这个时间才会触发 把频繁触发变为少量触发
    let span = document.querySelector('span');
    let button = document.querySelector('button');
    let count = 0 ;

    // button.onclick = function() {
    //     count++;
    //     span.innerHTML = count;
    // }

    button.onclick = _.throttle(function() {
        count++;
        span.innerHTML = count; 
    },1000)


</script>