防抖和节流

最新推荐文章于 2022-04-24 01:11:12 发布

闹闹没有闹

最新推荐文章于 2022-04-24 01:11:12 发布

阅读量66

点赞数

分类专栏：小demo JavaScript javascript 的小技巧文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_41893686/article/details/121198695

版权

小demo 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

JavaScript

15 篇文章 0 订阅

订阅专栏

javascript 的小技巧

14 篇文章 0 订阅

订阅专栏

防抖: 高频率执行事件，只执行一次，若是再次触发事件，则重新从最后一次触发事件开始计时（若是一直点击，则会重新计时，直到在时间在规定时间内不执行事件，才会执行结果）

节流：高频率执行事件，只执行一次，在规定的时间内，只执行第一次的事件，其他执行事件则无效，直到重新开始执行高频事件（若是一直点击，则是在规定时间间隔内再次执行）



<!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>防抖和节流</title>
    <style>
        .btn {
            display: inline-block;
        }
    </style>
</head>

<body>
    <input type="text">
    <button class="btn">提交</button>

    <script>
        let btn = document.querySelector(".btn")

        btn.addEventListener("click", debounce(submit, 2000, true), false)
        btn.addEventListener("click", throttle(submit, 2000, true), false)

        function submit(e) {
            console.log()
        }
        // 节流

        // function throttle(fn, delay) {
        //     var begin = 0
        //     return function () {
        //         var cur = new Date().getTime()
        //         if (cur - begin > delay) {
        //             begin = cur
        //             fn.apply(this, arguments)
        //         }
        //     }
        // }


        // 防抖
        function debounce(fn, time, tigger) {
            var timer = null

            return function () {
                 clearTimeout(timer)
                 timer = setTimeout(() => {
                    timer = null
                }, time)
            }
        }
    </script>

</body>

</html>

闹闹没有闹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖和节流

防抖: 高频率执行事件，只执行一次，若是再次触发事件，则重新从最后一次触发事件开始计时（若是一直点击，则会重新计时，直到在时间在规定时间内不执行事件，才会执行结果）节流：高频率执行事件，只执行一次，在规定的时间内，只执行第一次的事件，其他执行事件则无效，直到重新开始执行高频事件（若是一直点击，则是在规定时间间隔内再次执行）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-.
复制链接

扫一扫