防抖和节流

海马体加强中

已于 2023-01-28 13:29:01 修改

阅读量170

点赞数

分类专栏：笔记之基础知识面试题文章标签： javascript 前端开发语言

于 2023-01-28 09:18:56 首次发布

本文链接：https://blog.csdn.net/qq_38722696/article/details/128774752

版权

笔记之基础知识同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

面试题

4 篇文章 0 订阅

订阅专栏

防抖与节流

节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时
代码如下：

<!-- 防抖 -->
 <body>
    防抖： <input id="input" type="text">
</body>
<script>
    // 监听input输入值
    input.addEventListener('input', function (e) {
        val(e.target.value)
    })
    function fn(time, fun) { // 防抖的核心代码
        let flag // 定义状态
        return function (value) {
            clearTimeout(flag)// 在执行之前清除定时器flag 
            flag = setTimeout(() => {
                fun(value)
            }, time)
        }
    }
    let val = fn(1000, function (val) {
        console.log(val)
    })
</script> 


<!-- 节流 -->
<body>
    <button id="button">使劲点试试</button>
</body>
<script>
function throttle(fun, time) {
    let flag = 0
    return function () {
        let now = +new Date().valueOf()
        // 当前的值 - 上一次的值 >= 传过来的事件执行时间
        if (now - flag >= time) {
            fun.apply(this, arguments)
            flag = now
        }
    }
}
button.onclick = throttle((e) => {
    console.log(e)
}, 1000)
</script>