js防抖

2021-07-23 01:00:06 阅读：169 来源： 互联网

标签：function 防抖 flag js window let null 500

初级版

<!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">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <title>Document</title>
    <script>
        $(() => {
            let t;
            $('input').on('input', (event) => {

                if (t != null) {
                    clearTimeout
                }
                t = setTimeout(() => {
                    console.log(event.currentTarget.value);
                }, 500);

            })
        });

//或者
        window.onload = function() {
            let inp = document.querySelector("input")
            let t = null;
            inp.oninput = function() {
                if (t !== null) {
                    clearTimeout(t)
                }
                t = setTimeout(() => {
                    console.log(this.value);
                }, 500);

            }
        }

    </script>
</head>
<body>
    <input type="text">
</body>
</html>

晋级版


        window.onload = function() {
            let inp = document.querySelector("input")
            let t = null;
            inp.oninput = debounce(function() {
                console.log(this.value)
            }, 500)

            function debounce(fn, delay) {
                let t;
                return function() {
                    if (t != null) {
                        clearTimeout(t)
                    }
                    t = setTimeout(() => {
                        fn.call(this);
                    }, delay);
                }
            }
        }

节流

<!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">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <title>Document</title>
    <script>
        window.onload = function() {

            let flag = true
            window.onscroll = function() {
                if (flag) {
                    setTimeout(() => {
                        console.log('123');
                        flag = true
                    }, 500);

                }
                flag = false;

            }

        }
    </script>
</head>

<body style="height: 2000px;">
    <input type="text">
</body>

</html>

进阶


    <script>
        window.onload = function() {
            window.onscroll = throttle(() => {
                console.log('qweqwe');

            }, 500)
            function throttle(fn, delay) {
                let flag = true
                return function() {
                    if (flag) {
                        setTimeout(() => {
                            fn.call(this)
                            flag = true
                        }, 500);
                        flag = false;
                    }
                }
            }
        }
    </script>

标签：function,防抖,flag,js,window,let,null,500
来源： https://www.cnblogs.com/kutsu/p/15047114.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js防抖

初级版

节流