防抖和节流

KOTP17

已于 2022-03-27 14:58:02 修改

阅读量299

点赞数

分类专栏： JavaScript 文章标签： javascript

于 2022-03-27 14:38:08 首次发布

本文链接：https://blog.youkuaiyun.com/qq_58517459/article/details/123773131

版权

JavaScript 专栏收录该内容

22 篇文章

订阅专栏

<body>
    <input type="text">
</body>
<script>
    // 防抖:用户触发时间过于频繁，只要最后一次事件的操作
    let inp = document.querySelector("input");
    let t = null;
    inp.oninput = debounce(function () {
        console.log(this.value);
    }, 500)
    // 封装防抖的方法
    function debounce (fn, delay) {
        let t = null;
        return function () {
            if (t !== null) {
                clearTimeout(t)
            }
            t = setTimeout(() => {
                console.log(this, "this"); //this指向input
                fn.call(this)
            }, delay)
        }
    }
 //节流:控制执行次数,控制高频时间执行次数
    let flag = true;
    window.onscroll = function () {
        if (flag) {
            setTimeout(() => {
                console.log("hello world");
            }, 500)
        }
        flag = false;
    }
-------------------------------------------------
 window.onscroll = throttle(function () {
        console.log("hello world");
    }, 500)

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