窗口上的Javascript调整大小结束
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了窗口上的Javascript调整大小结束相关的知识,希望对你有一定的参考价值。
我在调整窗口大小时调用一个函数:
window.addEventListener("resize", calculateDimensions());
但是我需要一种方法在调整窗口大小后调用不同的函数。有没有办法使用本机js(而不是jquery)实现这一点
TIA
答案
您可以设置超时并在再次触发调整大小时重置它。因此,最后一次超时未被取消,并且该功能已运行:
function debounce(func){
var timer;
return function(event){
if(timer) clearTimeout(timer);
timer = setTimeout(func,100,event);
};
}
可以像这样:
window.addEventListener("resize",debounce(function(e){
alert("end of resizing");
}));
另一答案
我喜欢Jonas Wilms漂亮的小去抖功能,但是我认为将去抖时间作为一个参数更好。
// Debounce
function debounce(func, time){
var time = time || 100; // 100 by default if no param
var timer;
return function(event){
if(timer) clearTimeout(timer);
timer = setTimeout(func, time, event);
};
}
// Function with stuff to execute
function resizeContent() {
// Do loads of stuff once window has resized
console.log('resized');
}
// Eventlistener
window.addEventListener("resize", debounce( resizeContent, 150 ));
另一答案
使用window.addEventListener("resize", calculateDimensions);
calculateDimensions()
表示您执行该函数,然后将该结果用作回调函数。
以上是关于窗口上的Javascript调整大小结束的主要内容,如果未能解决你的问题,请参考以下文章