<!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>
<div style='width: 80%; height: 200px; border: 1px solid #999; border-radius: 8px;padding: 8px;box-shadow: 3px 4px 5px #999; margin: 0 auto;'>
<h2>截流测试区域-频繁点击</h2>
执行次数：
<div id='throttle'></div>
点击次数：
<div id='current'></div>
<button id='throttleBtn'>点击</button>
</div>
<div style='width: 80%; height: 200px; border: 1px solid #999; border-radius: 8px;padding: 8px;box-shadow: 3px 4px 5px #999; margin: 20px auto;'>
<h2>防抖测试区域-频繁输入</h2>
<input id='debounceIpt' />
<div id='debounceType' >
</div>
</div>
<script>
// 截流函数
// 概念：控制比如服务器请求次数，指定时间内只能执行一次，稀释函数执行频率
let throttleBtn = document.querySelector('#throttleBtn');
// 执行输出函数
function throttleFn(n, current) {
document.querySelector('#throttle').innerHTML = n;
document.querySelector('#current').innerHTML = current;
}
// 非立即执行函数 用户一次性计时器
function throttle (fn) {
let timer;
// 当前点击了多少次
let current = 0;
// 函数执行次数
let n = 0;
return function() {
++current;
if (!timer) {
timer = setTimeout(() => {
++n;
fn.call(this, n, current);
clearTimeout(timer);
timer = null;
}, 1000)
}
}
}
// 立即执行函数 运用时间戳
function throttleTwo (fn, timer) {
let pre = 0;
let current = 0;
let n = 0;
return function() {
let now = new Date().getTime();
++current;
if (now - pre > timer) {
pre = now;
++n;
fn.apply(this, [n, current])
}
}
}
let Fn = throttle(throttleFn);
let Fn2 = throttleTwo(throttleFn, 2000);
// throttleBtn.addEventListener( 'click', Fn);
throttleBtn.addEventListener( 'click', Fn2);
// 防抖函数
// 防抖概念：在一定时间内再次触发，重新计算计时器
// 举例： 例如用户远程搜索框，连续输入，重新计算计时器，发送服务端请求
// 最后一次执行 非立即执行
function debounce (fn, time) {
let timer;
return function() {
fn.call(this, '搜索中....');
timer && clearTimeout(timer);
timer = setTimeout(() => {
fn.call(this, '搜索成功！');
}, time)
}
}
// 立即执行
function debounceTwo (fn, time) {
let timer;
return function() {
!timer && fn.call(this, '第一次立即执行');
timer && clearTimeout(timer);
timer = setTimeout(() => {
timer = null;
fn.call(this, '输入后可继续执行');
}, time);
}
}
// 事件执行
function debounceFn(val) {
document.querySelector('#debounceType').innerHTML = val;
}
// 非立即执行
let debounceEv = debounce(debounceFn, 1000);
// 第一次立即执行
let debounceTwoEv = debounceTwo(debounceFn, 1000);
let debounceIpt = document.querySelector('#debounceIpt');
debounceIpt.addEventListener('input', debounceTwoEv);
</script>
</body>
</html>
网友评论