防抖、节流

sha_1234

已于 2023-03-07 10:26:42 修改

阅读量66

点赞数 1

分类专栏：基础

于 2022-08-04 21:31:24 首次发布

本文链接：https://blog.csdn.net/sha_1234/article/details/126167033

版权

javascript 前端

基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

防抖节流

<body style="height:2000px">
    <input type="text">
    <script>
     	let inp = document.querySelector("input");
     	
        // 防抖： 用户触发事件过于频繁，只要最后一次事件的操作
        inp.oninput = debounce(function() {
            console.log(this.value);
        }, 500)
        // 封装防抖
        function debounce(fn, time) {
            let t = null;
            return function() {
                if (t !== null) {
                    clearTimeout(t);
                }
                t = setTimeout(() => {
                    fn.call(this);
                }, time)
            }
        }

        // 节流： 控制执行次数
        // 节流作用：控制高频时间执行
        window.onscroll = throttle(function() {
            console.log("hhhh");
        }, 500)
		// 封装节流
        function throttle(fn, time) {
            let flag = true;
            return function() {
                if (flag) {
                    setTimeout(() => {
                        fn.call(this);
                        flag = true;
                    }, 500)
                }
                flag = false;
            }
        }
    </script>
</body>