防抖和节流（获取时间戳的三种方式）

最新推荐文章于 2024-06-15 14:41:39 发布

憨憨404

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量86

点赞数

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

本文链接：https://blog.csdn.net/qq_60839348/article/details/129155498

版权

随笔Js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这两个都是和短时间内频繁多次触发同一事件相关的性能优化

防抖：

短时间内频繁触发同一事件时，只有最后一次生效. 例如电梯关门的效果

//'功能拆分'： 设置一个延时定时器，在2s后获取输入输入的内容，
//如果2s内，用户输入了新的内容，就清除定时器，并重新开启一个定时器


//    <input type="text" id="inpEle">




//获取元素 inpEle
 
var timer = 0
    
    inpEle.addEventListener('input', () => {
        // 1. 清除上一个定时器
        clearTimeout(timer)
        // 开启一个新的定时器
        timer = setTimeout(function(){
            console.log('输入框的内容', inpEle.value)
        }, 2000)
    })

节流：（获取时间戳的三种方式）

短时间内频繁触发同一个事件时，在单位时间内，只生效一次。例如lol英雄的大招

<body>
    <input type="text" id="inp">
    <button id="btn">戳我~~~~~~</button>
    
    <script>
    // '功能拆分'：记录下当前的时间，当点击按钮后，记录下点击按钮时的时间；如果两次的时间间隔大于3s，就获取输入框的内容，并将当前时间保存给上一次的时间


    // 获取时间戳的三种方式：：：
    // 现在时间
    let nowTime = Date.now()
    // let newtime = +new Date()
    // let newtime = new Date().getTime();

    btn.addEventListener('click', () => {
        // 点击后时间
        let clickTime = Date.now() 
        console.log(clickTime);
        if (clickTime - newTime > 3000) {
            console.log('没错我就是节流',inp.value);
            // 记得把当前点击时间赋值给上一个点击时间，大于3秒
            nowTime = clickTime
        }
    })

    </script>
</body>