先做一个监听鼠标移动的base:
<style>#content{height:150px;width:200px;text-align:center;color:#fff;background-color:#ccc;font-size: 70px;}
</style>
<div id="content"></div>
<script>let content = document.getElementById('content');let num = 0;function count () {content.innerHTML = num++};content.onmousemove = count;
</script>
// 鼠标在灰色方块内移动时,数字会疯狂的涨.
防抖(debounce): 是指触发事件在n秒内函数只能执行一次,如果在n秒内又触发了事件,则会重新计算函数执行时间
// 非立即执行: 本例中是指,鼠标移动,然后再某个地方停留s秒后,才执行函数
function debounce(func, wait) {let timeout;return function () {let self = this;let args = arguments;if (timeout ) clearTimeout(timeout);timeout = setTimeout( () => {func.apply(self, args);}, wait);}
}
content.onmousemove = debounce( count, 1*1000);// 立即执行: 立即执行,然后等待s秒(中途若移动则重新计算)后,然后立即执行,再等待s秒
function debounce(func, wait) {let timeout;return function () {let self = this;let args = arguments;if ( timeout ) clearTimeout( timeout ) ;let callNow = !timeout;timeout = setTimeout( () => {timeout = null;}, wait)if ( callNow ) func.apply(self, args);}
}// 混合防抖(immediate为真代表立即执行)
function debounce(func, wait, immediate=false) {let timeout;return function () {let self = this;let args = arguments;if( timeout ) clearTimeout( timeout );if( immediate) { // 立即执行let callNow = !timeout;timeout = setTimeout ( () => {timeout = null;}, wait)if ( callNow ) func.apply(self, args);} else {timeout = setTimeout( () => {fn.apply(self, args);}, wait);}}
}
节流(throttle): 所谓节流,就是指连续触发事件,但是在n秒内该事件只处理一次
function throttle(func, wait) {let previous = 0;return function() {let now = Date.now();let self = this;let args = arguments;if (now - previous > wait) {func.apply(context, args);previous = now;}}
}
参考 函数防抖和节流
