函数的节流和防抖及其应用场景

函数防抖

1.什么是函数防抖[debounce]?

函数防抖是优化高频率执行js代码的一种手段

可以让被调用的函数在一次连续的高频操作过程中只被调用一次

2.函数防抖作用

减少代码执行次数, 提升网页性能

3.函数防抖应用场景

oninput / onm ousemove  / onscroll / onresize等事件

示例1：

    <input type="text" placeholder="请输入搜索内容">

    <script>
        const oInput = document.querySelector("input");

        function test() {
            console.log("请求");
        }

        oInput.oninput = debounce(test, 1000);

        //封装
        function debounce(fn, delay) {
            let timerId = null;
            return function() {
                let self = this;
                let args = arguments;
                timerId && clearTimeout(timerId);
                timerId = setTimeout(function() {
                    fn.apply(self, args);
                }, delay || 1000);
            }
        }
    </script>

 

示例2：让div的宽高永远都是可视区宽高的一半

        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            background: skyblue;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

    <div></div>

    <script>
        const oDiv = document.querySelector("div");

        function resetSize() {
            const {
                width,
                height
            } = getScreen();

            oDiv.style.width = width / 2 + 'px';
            oDiv.style.height = height / 2 + 'px';
        }

        resetSize();

        //监听可视区尺寸的变化
        window.onresize = debounce(function() {
            resetSize();
        }, 500);

        //封装--防抖
        function debounce(fn, delay) {
            let timerId = null;
            return function() {
                let self = this;
                let args = arguments;
                timerId && clearTimeout(timerId);
                timerId = setTimeout(function() {
                    fn.apply(self, args);
                }, delay || 1000);
            }
        }

        // 封装--获取浏览器可视区宽高
        function getScreen() {
            let width, height;
            if (window.innerWidth) {
                width = window.innerWidth;
                height = window.innerHeight;
            } else if (document.compatMode === "BackCompat") {
                width = document.body.clientWidth;
                height = document.body.clientHeight;
            } else {
                width = document.documentElement.clientWidth;
                height = document.documentElement.clientHeight;
            }
            return {
                width: width,
                height: height
            }
        }
    </script>

---

函数节流

1.什么是函数节流[throttle]?

函数节流也是优化高频率执行js代码的一种手段

可以减少高频调用函数的执行次数

2.函数节流作用

减少代码执行次数, 提升网页性能

3.函数节流应用场景

oninput / onm ousemove  / onscroll / onresize等事件

4.函数节流和函数防抖区别

函数节流是减少连续的高频操作函数执行次数  (例如连续调用10次, 可能只执行3-4次)

函数防抖是让连续的高频操作时函数只执行一次(例如连续调用10次, 但是只会执行1次)

示例

        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            background: skyblue;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

    <div></div>

    <script>
        const oDiv = document.querySelector("div");

        function resetSize() {
            const {
                width,
                height
            } = getScreen();

            oDiv.style.width = width / 2 + 'px';
            oDiv.style.height = height / 2 + 'px';
        };

        resetSize();

        //监听可视区尺寸的变化
        window.onresize = throttle(function() {
            resetSize();
        }, 500);

        //封装--防抖
        function debounce(fn, delay) { // fn = test
            let timerId = null;
            return function() {
                let self = this;
                let args = arguments;
                timerId && clearTimeout(timerId); //有就关闭定时器
                timerId = setTimeout(function() { //反之就开启定时器
                    fn.apply(self, args);
                }, delay || 1000);
            }
        };

        //封装--节流
        function throttle(fn, delay) { // fn = test
            let timerId = null;
            let flag = true;
            return function() {
                if (!flag) return;
                flag = false;
                let self = this;
                let args = arguments;
                timerId && clearTimeout(timerId); //有就关闭定时器
                timerId = setTimeout(function() { //反之就开启定时器
                    flag = true;
                    fn.apply(self, args);
                }, delay || 1000);
            }
        };

        // 封装--获取浏览器可视区宽高
        function getScreen() {
            let width, height;
            if (window.innerWidth) {
                width = window.innerWidth;
                height = window.innerHeight;
            } else if (document.compatMode === "BackCompat") {
                width = document.body.clientWidth;
                height = document.body.clientHeight;
            } else {
                width = document.documentElement.clientWidth;
                height = document.documentElement.clientHeight;
            }
            return {
                width: width,
                height: height
            }
        };
    </script>

标签：function,防抖,场景,节流,height,width,let,timerId,document
来源： https://blog.csdn.net/weixin_43285360/article/details/121194668