防抖节流的使用和封装成函数

前置知识

关于this指向问题，防抖函数中的fn.apply(this,arguments)作用

防抖函数中的fn.apply(this,arguments)作用

this指向问题

节流

一定时间内只执行一项任务

节流原理

执行一个函数
执行这个函数的时候看看前面有没有执行过
如果前面有执行过这个函数并且没有完成,那么本次任务就不执行

节流前

可以看到"move"疯狂输出

节流后

程序输出move的次数明显减少

节流函数

/**
 * 节流
 * @param {function} fn 要节流的函数
 * @param {number} delay 延迟(类似于fps一样~)
 * return 执行函数
 */
function throttleMy(fn, delay) {
	//这样子建立了一个闭包,timer始终存在
	var timer=null;
	return function (...args) {
		if (timer) {
			return;
		}
		timer = setTimeout(function () {
			//传入的为[30,40,50....这种形式],所以不能单纯fn(args)
			//不确定参数,加上参数形式为[....],就使用fn.apply(this.args);
			fn.apply(this, args);
			timer=null;
		}, 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">
    <title></title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            top: 100px;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
    <script>
        var box = document.querySelector(".box");
        window.onmousemove=throttleMy(function(e){
            box.style.left = e.pageX - (box.clientWidth) / 2 + "px";
            box.style.top = e.pageY - (box.clientHeight) / 2 + "px";
        },40)

        /**
         * @param {function} fn 要防抖的函数
         * @param {number} delay 延迟(类似于fps一样~)
         * return 执行函数
         */
        function throttleMy(fn, delay) {
            //这样子建立了一个闭包,timer始终存在
            var timer=null;
            return function (...args) {
                if (timer) {
                    return;
                }
                timer = setTimeout(function () {
                    //传入的为[30,40,50....这种形式],所以不能单纯fn(args)
                    //不确定参数,加上参数形式为[....],就使用fn.apply(this.args);
                    fn.apply(this, args);
                    timer=null;
                }, delay);
            }
        }
    </script>
</body>
</html>

防抖

防抖原理

执行一个函数
执行这个函数的时候一段时间后如果有东东再次执行这个函数,则重新计时后在次调用

防抖前

输入框输入"你好"

防抖后

输入框再次输入"你好"

可以看到少了很多次

防抖函数

/**
* 防抖
* @param {function} fn 要防抖的函数
* @param {number} delay 延迟(类似于fps一样~)
* return 执行函数
*/
function debounce(fn, delay) {
//这样子建立了一个闭包,timer始终存在
var timer = null;
return function (...args) {
	if (timer) {
		clearTimeout(timer); //清除上一次的
	}
	timer = setTimeout(function () {
		//传入的为[30,40,50....这种形式],所以不能单纯fn(args)
		//不确定参数,加上参数形式为[....],就使用fn.apply(this.args);
		fn.apply(this, args);
		timer = null;
	}, 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">
    <title>Document</title>
</head>

<body>
    账户：<input type="text" id="useript">
    <script>
        var ipt = document.getElementById("useript");
        ipt.onkeyup=debounce(function(e){
            console.log(e);
        },40);
        /**
         * 防抖
         * @param {function} fn 要防抖的函数
         * @param {number} delay 延迟(类似于fps一样~)
         * return 执行函数
         */
        function debounce(fn, delay) {
            //这样子建立了一个闭包,timer始终存在
            var timer = null;
            return function (...args) {
                if (timer) {
                    clearTimeout(timer); //清除上一次的
                }
                timer = setTimeout(function () {
                    //传入的为[30,40,50....这种形式],所以不能单纯fn(args)
                    //不确定参数,加上参数形式为[....],就使用fn.apply(this.args);
                    fn.apply(this, args);
                    timer = null;
                }, delay);
            }
        }
    </script>
</body>

</html>