Question

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

例如，此代码：

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

... some code ...

};

基本上我想执行一些css更改，但只有ONCE，在最后一个窗口调整大小后1秒。现在这会触发太多次并使一切都很慢..

Answer 1

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

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

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

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

Answer 2

你需要一个timeOut，并且由于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)
    );
});

Answer 3

试试这个：

var timer;

$(window).bind("resize", methodToFixLayout);
  function methodToFixLayout(e) {
    if(timer) clearTimeout(timer);
    timer = setTimeout(function(){
      ... some code ...
    },1000);
};

Answer 4

您需要setTimeout()。

E.G。

var timeout;

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

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

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

jQuery执行函数一次，窗口调整大小结束后1秒

4 个答案: