1

有没有办法在窗口调整大小结束后 1 秒执行函数？

例如对于此代码：

$(window).bind("resize", methodToFixLayout);
function methodToFixLayout(e) {

... some code ...

};

基本上我想执行一些css更改，但只执行一次，在最后一个窗口调整大小后1秒..现在这触发了太多次，让一切都变得非常慢..

4

4 回答 4

7 
var timer;
$(window).bind('resize', function() {
  if(timer)
    clearTimeout(timer);
  timer = setTimeout(function(){ /* Whatever you want here */ }, 1000);
});

如果用户不断拖动窗口，resize 事件将快速触发，该方法将在拖动停止 1 秒时触发一个动作。

编辑：烤和 adeneo 的好评，只需调用 clearTimeout(timer) 而不检查是否设置了计时器，步骤更少/效率更高

var timer;
$(window).bind('resize', function() {
  clearTimeout(timer);
  timer = setTimeout(function(){ /* Whatever you want here */ }, 1000);
});
于 2013-07-12T23:50:16.413 回答
6

您需要一个超时时间，并且由于 resize 事件连续触发，您应该清除新调整大小的超时，以确保它不会多次触发：

var timer;

$(window).on("resize", function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
        ... some code ...
    },1000);
});

或没有全局：

$(window).on("resize", function() {
    clearTimeout($(this).data('timer'));
    $(this).data('timer', setTimeout(function() {
            ... some code ...
        },1000)
    );
});
于 2013-07-12T23:47:29.140 回答
0

尝试这个 ：

var timer;

$(window).bind("resize", methodToFixLayout);
  function methodToFixLayout(e) {
    if(timer) clearTimeout(timer);
    timer = setTimeout(function(){
      ... some code ...
    },1000);
};
于 2013-07-12T23:47:27.780 回答
0

你需要setTimeout()。

例如

var timeout;

$(window).on('resize', function() {
  if (timeout) {
    clearTimeout(timeout);
  }

  timeout = setTimeout(yourMethodToFixLayout, 1000);
});

在这里演示：http: //codepen.io/anon/pen/LcAIC

于 2013-07-12T23:50:56.760 回答