console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
body > div {
margin: auto;
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<div>
<input type="text" />
<span></span>
</div>
</body>
<script>
/**
*
* func立即执行，之后每wait间隔执行，最后还会执行一次
*/
function throttle(func, wait) {
var play = false;
var copy = func;
return function () {
var context = this;
var args = arguments;
copy = func;
if (!play) {
if (copy) {
copy.call(this, ...arguments);
copy = null;
}
play = true;
let timer = setTimeout(function() {
play = false;
if (copy) {
copy.call(context, ...args);
}
clearTimeout(timer);
}, wait);
}
};
}
const div = document.getElementsByTagName("div")[0];
div.children[0].addEventListener(
"input",
throttle((e) => {
div.children[1].innerHTML = e.target.value;
}, 2000)
);
</script>
</html>