我在window.resize()事件的帮助下并在this链接的帮助下完全调整窗口大小时调用了一些代码。 它有效,但问题是当你重新调整大小超过3次时它会变慢。因此,当您增加重新调整大小的数量时,页面会变得越来越慢。
我的代码如下,
$(window).bind('resize', function(e) {
window.resizeEvt;
$(window).resize(function() {
clearTimeout(window.resizeEvt);
window.resizeEvt = setTimeout(function() {
//code to do after window is resized
}, 250);
});
});
任何人都可以帮我确定放慢速度的原因吗?
答案 0 :(得分:1)
每次调整浏览器大小时都会触发窗口调整大小事件,对于每个像素而不是一次;事件没有延迟。此外,您所做的是手动执行调整大小事件...当您处于调整大小事件时。您不需要致电$(window).resize
!您只需要绑定一次事件(并且不推荐使用.bind
,现在支持.on
)。
您的解决方案是限制在调整浏览器大小时执行的操作。这个问题,我亲自在几个项目中解决了,而且代码运行得很好。
/**
Author: yanick.rochon@gmail.com
License: MIT
Return a copy of the function fn that can be called multiple times.
The function fn will actually be called if 1) a certain amount of
time elapsed after the last call, or 2) a certain number of repetitive
calls have been made.
The function fn will be invoked with the last arguments sent through
the returned proxy function.
Options are :
- delay {Numeric} the number of ms before satisfying the first condition
- stack {Numeric} the number of repetitive calls before satisfying the second condition
NOTE : these conditions are ORed, meaning that fn will be invoked if either
condition 1) or 2) is met.
@param {Function} fn the function to proxy
@param {Object} options the key-pair of options
@param {any} ctx a context to bind fn to when calling
@return {Function} a proxy function.
*/
function asyncProxy(fn, options, ctx) {
var timer = null;
var counter = 0;
var _call = function (args) {
counter = 0;
fn.apply(ctx, args);
};
ctx = ctx || window;
options = $.extend({
delay: 0,
stack: Infinity
}, options);
return function () {
counter++;
// prevent calling the delayed function multiple times
if (timer) {
clearTimeout(timer);
timer = null;
}
if (counter >= options.stack) {
_call(arguments);
} else {
var args = arguments;
timer = setTimeout(function () {
timer = null;
_call(args);
}, options.delay);
}
};
}
你就像这样使用它
var processWindowResize = asyncProxy(function (event) {
// *** Your code goes here ***
}, {
delay: 250
});
$(window).on('resize', processWindowResize);
答案 1 :(得分:0)
那是因为你永远不会结束重新调整大小,所以事件一直在持续,每次都比另一个重,你甚至可以使用fiddler检查你的响应。
当窗口完成大小调整时,你需要做的是简单的,结束时:
var someInvoice = GetInvoice(1);
var name = someInvoice.Invoice.customerName;
var total = someInvoice.Total;
这样您就可以清除事件,每次执行事件时都将其关闭,这样就不会减慢您的网页速度。
答案 2 :(得分:0)
任何基于超时的代码的问题在于,如果用户缓慢调整窗口大小,那么它可以多次触发调整大小(包括此代码) - 如果它只是更新显示的情况,那么我的自己的偏好是使用requestAnimationFrame
来确保此更新尽可能干净 -
var resizing = false,
processingResize = false;
function processResize() {
if (resizing) {
resizing = false;
window.requestAnimationFrame(processResize);
} else {
processingResize = false;
// Do stuff here
}
}
$(window).on("resize", function(event) {
if (!resizing && event.target === window) {
resizing = true;
if (!processingResize ) {
processingResize = true;
window.requestAnimationFrame(processResize);
}
}
});
一般来说,我实际上有一个rAF包装器可以检查document.hidden
并在页面不可见时使用setTimeout - 但这与简单的用法无关,因为它可以用于当页面再次可见时调用一次,然后可以进行任何调整大小。
如果您尝试检测用户何时完成调整大小,那么就没有绝对的方法,但合并mousemove事件会更准确地捕获它。