<input type="text" oninput="debonce(cont, 1000)">
<div id="content"></div>
<script>
var arr = document.getElementById('content')
var num = 1;
function cont(){
arr.innerHTML = num++
}
arr.onmousemove = cont;
// 防抖的方式
// 实现过一秒之后再查询(延迟执行)
function debonce(func, wait){
let timeout;
return function(){
if(timeout) clearTimeout(timeout); // 如果timeout存在值，则清除timeout
timeout = setTimeout(() => {
func.apply() // 如果timeout存在值时，1秒之后才能执行函数
}, wait);
}
}
// arr.onmousemove = debonce(cont, 1000);
// 实现立即执行查询，1秒之后才能再次执行查询
function debug(func, time){
let timeout;
return function(){
if(timeout) clearTimeout(timeout) // 如果timeout存在值，则清除timeout
let call = !timeout; // 有值为真，取反
if(call) func.apply(); // 如果无值，则执行函数cont
timeout = setTimeout(() => {
timeout = null // 当值存在时，添加定时器time秒之后将timeout的值赋为空，反之一直不执行函数
}, time);
}
}
// arr.onmousemove = debug(cont, 1000);
// 利用节流来实现 throttle
// 用定时器的方式一般不建议 这么写 例如移动端做动画效果时
function throttle(func, time){
let timeout;
return function(){
if(!timeout){
timeout = setTimeout(() => {
timeout = null
func.apply()
}, time);
}
}
}
// arr.onmousemove = throttle(cont, 1000);
// 这时我们就可以利用时间戳的方式来实现 这样有利于浏览器的优化
function throttlee(func, time){
let num = 0; // 上次的记录时间
return function(){
let arr = Date.now() // 当前时间
if(arr - num > time){ // 如果当前时间减去上次记录时间 大于 等待时间
func.apply(); // 则执行函数
num = arr; // 重置上次的记录时间等于当前时间
console.log(num)
}
}
}
arr.onmousemove = throttlee(cont, 2000);
</script>