防抖和节流

不为霜停

已于 2022-07-11 17:51:13 修改

阅读量162

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： javascript vue.js 前端

于 2022-05-21 15:32:32 首次发布

本文链接：https://blog.csdn.net/mushroomLNL/article/details/124898795

vue 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了防抖和节流两种JavaScript优化技术。防抖技术用于限制函数的执行频率，在用户连续操作时避免过度调用，如防止多次点击导致的重复请求。节流技术则确保在一定时间内函数只执行一次，适用于处理滚动事件以减少处理频率。通过示例代码展示了如何实现防抖和节流函数，并在按钮点击事件中应用了防抖技术，以防止短时间内频繁添加列表项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防抖

解释: 事件触发之后n秒之后才会执行回调函数, 如果在这个n秒之内再次触发这个事件 , 则重新计时
应用 : 可以用在一些用户点击事件上面 , 避免用户多次点击而向后端发送多次请求

		function debounce(fn , wait , args){
            let timer = null

            return ()=>{
                if(timer){
                    clearTimeout(timer)
                    timer = null
                }

                timer = setTimeout(() => {
                    let newargs = [...arguments].slice(2)
                    fn.apply(this,newargs)
                }, wait);
            }
        }

节流

解释 : 在一定时间内 , 这个函数只能被触发一次 , 如果在同一时间内这个函数被多次触发 , 只会有一次生效
应用 : 在一些滚动事件上面使用节流 , 可以降低事件触发的频率

function throttle(fn , delay){
            let curTime = Date.now()
        
            return ()=>{
                let nowTime = Date.now()

                if(nowTime-curTime >= delay){
                    //重新赋值
                    curTime = Date.now()
                    fn.apply(this,[...arguments].slice(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>Document</title>
    <style>
        button {
            position: fixed;
            bottom: 50px;
            left: 50%;
        }
    </style>
</head>

<body>
    <ul>
        <li>12</li>
    </ul>
    <button>点击添加</button>

    <script>
        let btn = document.getElementsByTagName('button')[0]
        btn.addEventListener('click', throttle(add, 2000, 'lnl'))


        function debounce(fn , wait , args){
            let timer = null

			//箭头函数可以获取外层作用域的this , arguments
            return ()=>{
                if(timer){
                    clearTimeout(timer)
                    timer = null
                }

                timer = setTimeout(() => {
                    let newargs = [...arguments].slice(2)
                    fn.apply(this,newargs)
                }, wait);
            }
        }

     
        function throttle(fn , delay){
            let curTime = Date.now()
        
            return ()=>{
                let nowTime = Date.now()

                if(nowTime-curTime >= delay){
                    //重新赋值
                    curTime = Date.now()
                    fn.apply(this,[...arguments].slice(2))
                }
            }


        }


        function add(value) {
            let ul = document.getElementsByTagName('ul')[0]
            const newli = document.createElement('li')
            newli.innerHTML = value
            ul.appendChild(newli)
        }
    </script>
</body>

</html>