手写防抖函数
要点
- 函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时
- 闭包可以存储变量，不被销毁，在防抖中需要使用闭包来存储定时器变量，来控制定时器内部回调函数是否触发
- 需要改变闭包内执行函数的this指向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>防抖函数</title>
</head>
<body>
<button id="btn">点击触发</button>
<script>
// 防抖函数:函数执行第一次后，需要等一段时间内没有触发这个函数，才能再次触发
// 函数防抖的实现
function debounce(fn, wait) {
let timer = null;
return function () {
let context = this,
args = arguments;
// 如果此时存在定时器的话，则取消之前的定时器重新记时
if (timer) {
clearTimeout(timer);
timer = null;
}
// 设置定时器，使事件间隔指定事件后执行
timer = setTimeout(() => {
fn.apply(context, args);
}, wait);
};
}
let btn = document.getElementById('btn')
const handleBtn = () => {
console.log('触发函数*************************');
}
btn.addEventListener('click', debounce(handleBtn, 1000))
</script>
</body>
</html>
手写节流函数
与防抖函数类似，只是定时器的控制方式不同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>防抖函数</title>
</head>
<body>
<button id="btn">点击触发</button>
<script>
function throttle(fn, wait) {
let timer = null;
return function () {
let context = this
let args = arguments
if (timer) return
timer = setTimeout(() => {
fn.apply(context, args);
clearTimeout(timer)
timer = null
}, wait);
};
}
const handleBtn = () => {
console.log('触发了---');
}
const button = document.getElementById('btn');
button.addEventListener('click', throttle(handleBtn, 2000));
</script>
</body>
</html>
手写数据类型判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手写类型判断函数</title>
</head>
<body>
<script>
function getTypeName(data) {
let classNameArray = Object.prototype.toString.call(data)
return classNameArray.split(' ')[1].split(']').join('')
}
console.log(getTypeName(1));
console.log(getTypeName('hello world'));
console.log(getTypeName([1, 2, 3]));
console.log(getTypeName({ name: 'zhangsan' }))
console.log(getTypeName(function () { }))
console.log(getTypeName(new Date()))
</script>
</body>
</html>
