前調整後事件

Question

我想前和調整元素之後做一些事情，我試圖綁定調整事件，它的工作：

$('#test_div').bind('resize', function(){ 
      // do something 
}); 

我已經發現了一些問題，但解決方案是timeout，我不想使用timeout。我只是想立即處理:)

參見：

• JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

• jQuery - how to wait for the 'end' or 'resize' event and only then perform an action?

感謝您的任何建議:)

Answer 1

的re並不是您可以聽到的調整結束事件。要知道用戶完成調整大小的唯一方法是等待一段時間過去，而不再發生任何調整大小事件。這就是爲什麼該解決方案几乎總是涉及到使用setTimeout()，因爲這是瞭解一段時間過去並且沒有更多大小調整事件的最佳方式。

這以前我的回答偵聽.scroll()事件，但它是完全一樣的概念.resize()：More efficient way to handle $(window).scroll functions in jquery?，你可以使用相同的概念，調整如下：

var resizeTimer; 
$(window).resize(function() { 
    if (resizeTimer) { 
     clearTimeout(resizeTimer); // clear any previous pending timer 
    } 
    // set new timer 
    resizeTimer = setTimeout(function() { 
     resizeTimer = null; 
     // put your resize logic here and it will only be called when 
     // there's been a pause in resize events 
    }, 500); 
} 

您可以用500實驗定時器的值，看看你喜歡它。數字越小，調用調整大小處理程序的速度越快，但可能會多次調用它。數字越大，發射前暫停的時間越長，但在同一用戶操作期間不太可能發射多次。

如果您想在調整大小之前執行某些操作，那麼您必須在獲取的第一個調整大小事件上調用一個函數，然後在當前調整大小操作期間不再調用該函數。

var resizeTimer; 
$(window).resize(function() { 
    if (resizeTimer) { 
     clearTimeout(resizeTimer); // clear any previous pending timer 
    } else { 
     // must be first resize event in a series 
    } 
    // set new timer 
    resizeTimer = setTimeout(function() { 
     resizeTimer = null; 
     // put your resize logic here and it will only be called when 
     // there's been a pause in resize events 
    }, 500); 
} 

Answer 2

您可以使用smart resize jQuery插件，但最終它仍然使用setTimeout()。

然後再次，它不會等待調整大小的結束......它只是扼殺它。

Answer 3

你也可以嘗試其他方法。

首先創建一個方法來獲得有效的斷點（手機，平板電腦，臺式機，臺式機大），即Breakpoint.getActive（）

然後使用數組保存在縮放記錄的最後兩個狀態。

示例代碼：

var beforeAfterResize = []; 
$(window).resize(function() { 

var resizeInfo = Breakpoint.getActive(); 
if (beforeAfterResize.length > 1) { 
    beforeAfterResize[0] = beforeAfterResize[1]; 
    beforeAfterResize[1] = resizeInfo; 
} else { 
    beforeAfterResize.push(resizeInfo); 
} 
console.log(beforeAfterResize); 

}); 

稱爲beforeAfterResize將只存儲在位置0的兩個值並1.如果有2倍以上的值的陣列，然後是位置0取入的位置1和1位的值，最新值，將保留當前的斷點信息。

這樣你就可以在沒有超時事件的情況下進行比較前/後比較。

調整大小後，您將能夠比較beforeAfterResize [0]和beforeAfterResize [1]之間的值，如果它們不同，則可以執行一些操作。

示例：比方說，我想知道是否在調整大小後，我從移動設備移動到桌面或大型桌面。然後我會用這樣的東西：

var fromMobile = false; 
if (((beforeAfterResize[0] === "mobile") || (beforeAfterResize[0] === "tablet")) 
    && ((beforeAfterResize[1] === "desktop") || (beforeAfterResize[1] === "desktop-large"))) { 
    fromMobile = true; 
} 

讓我知道這是否適合你。