防抖和节流
防抖：在给定时间内没有再次触发，该函数才会执行。
节流：先执行一次，在给定时间内该函数不会被再次触发。
js两种定时器
setTimeOut：该定时器n秒后执行一次函数，只会执行一次。
setInterVal：该定时器n秒执行一次函数，循环多次执行。
call、apply、bind
共同点: call、apply、bind都可以改变this的指向，第一个参数都是this的指向。
异同点：
- call 第二个参数及其以后的参数都是想要传递的参数，他传递的是一个参数列表 例如：fn.call(this, 1,2,3)，函数会立即执行。
- apply 第二个参数传递的是一个参数数组 例如：fn.apply(this, [1,2,3])，函数立即执行。
- bind 第二个参数及其以后的参数都是想要传递的参数，他传递的是一个参数列表 例如：fn.bind(this, 1,2,3), 会返回一个函数，需要接收并且手动调用。
防抖函数和节流函数
// 防抖函数
function debounce(fn, wait) {
let timer = null
// console.log(this, '1'); // this => window
return function () {
const e = arguments[0] // arguments[0] => input事件对象
// console.log(this, '2'); // this => input
timer && clearTimeout(timer)
timer = setTimeout(() => {
fn.call(this, e) // 调用fn 并传递input事件对象e
}, wait);
}
}{/tabs-pane}
{tabs-pane label="节流"}
// 节流函数
function throttle(fn, wait) {
let timer = null
return function() {
const args = arguments
if (!timer) {
fn.apply(this, args)
timer = setTimeout(() => {
timer && clearTimeout(timer)
timer = null
}, wait)
}
}
}{/tabs-pane}
小案例测试
<!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>js防抖和节流</title>
</head>
<body>
<input type="text" id="inp1">
<input type="text" id="inp2">
<script>
const $ = function (selector) {
return document.querySelector(selector)
}
// 测试防抖-给定时间里内没有再次触发才会执行
$('#inp1').addEventListener('input', debounce(function (e) {
console.log(this, '3'); // this => input
console.log(e, '事件对象');
console.log(e.target.value)
}, 1000))
// 测试节流-先执行一次 再次执行需要等到时间超过给定时间才会执行
$('#inp2').addEventListener('input', throttle(function (e) {
console.log(this, '3'); // this => input
console.log(e, '事件对象');
console.log(e.target.value)
}, 1000))
</script>
</body>
</html>
感谢分享，赞一个