JavaScript — resize事件监听窗口变化
JavaScript — resize事件监听窗口变化
·
前言
resize 事件是在浏览器窗口大小发生变化时触发,利用该事件可以跟踪窗口大小的变化来动态调整页面的元素显示。
接下来利用 resize 事件实现一个小案例:监听浏览器窗口变化,实时获取该窗口的宽度和高度。
实现
首先写一个获取窗口宽高的方法
const getWindowInfo = () => {
const windowInfo = {
width: window.innerWidth,
hight: window.innerHeight
}
console.log(windowInfo);
};
然后监听 resize 事件
window.addEventListener('resize', getWindowInfo);
这样就已经简单实现了,不过这种方式会导致触发方法的频率很高
这个时候就需要防抖,无论我们怎么拖动窗口大小,只执行一次获取浏览器宽高的方法
const debounce = (fn, delay) => {
let timer;
return function() {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn();
}, delay);
}
};
const cancalDebounce = debounce(getWindowInfo, 500);
window.addEventListener('resize', cancalDebounce);
现在就可以了,该方法只会在窗口停止变化的 500 毫秒后触发一次
友情提示:如果是在 vue 中使用的话,记得在组件销毁的钩子中去移除监听事件,不然可能会出现一些你意想不到的 bug
window.removeEventListener('resize', cancalDebounce);
更多推荐
所有评论(0)