綁定到調整窗口大小調用flexslider上的調整大小時的循環

在站點上使用flexslider插件。綁定到調整窗口大小調用flexslider上的調整大小時的循環

我想檢測瀏覽器調整大小，然後重新啓動滑蓋，因此可以調整大小/其他ARGS。

要做到這一點，我發現：

var slider = $('.flexslider').data('flexslider'); 
slider.resize();

其中一期工程，但現在我已經創建了一個函數來調用這一點，並綁定使用它的窗口大小調整：

$(window).bind('resize', function() { 
    console.log('window resized'); 
    resizeSlider(); 
}); 

// resize the slider 
function resizeSlider() 
{ 
    var slider = $('.flexslider').data('flexslider'); 
    slider.resize(); 
    console.log('slider-resized'); 
}

的問題是，當我調整瀏覽器我得到「調整瀏覽器」日誌絡繹不絕，然後600前堆：

Uncaught RangeError: Maximum call stack size exceeded

我該如何解決這個問題？

來源

2015-12-18 Lovelock

聽起來像有一個我們一無所知的潛在問題。也許窗口大小調整事件觸發了別的地方？

這是我在很多項目中使用的一個小函數，每次幫助我。

/** 
    * @description delay events with the same id, good for window resize events, keystroke, etc ... 
    * @param {Function} func : callback function to be run when done 
    * @param {Integer} wait : integer in milliseconds 
    * @param {String} id : unique event id 
    */ 
var delayedEvent = (function() { 
    var timers = {}; 

    return function (func, wait, id) { 
     wait = wait || 200; 
     id = id || 'anonymous'; 
     if (timers[id]) { 
      clearTimeout(timers[id]); 
     } 

     timers[id] = setTimeout(func, wait); 
    }; 
})();

適用於你的大小調整功能，簡單地繞到它：

function resizeSlider() { 
    delayedEvent(function() { 
     var slider = $('.flexslider').data('flexslider'); 
     slider.resize(); 
     console.log('slider-resized'); 
    }, 200, 'flexslider-resize'); 
}

現在每當resizeSlider()被調用時，你會執行此功能每200ms。這應該防止範圍錯誤。

要檢查潛在問題，在$(window).bind('resize')使用它。現在我注意到，你有沒有試過$(window).on('resize')或bind的原因是什麼？您使用較舊的jQuery版本？

還要注意的是$('.flexslider').data('flexslider')被稱爲每次。這個變量應該在函數作用域之外，或許作爲一個參數，如果它沒有改變的話。 =>「委派」或「lambda」。

來源

2015-12-18 11:23:18

能否請你嘗試做this，您的代碼的性能非常差，因爲它是永久調用，即使你移動你的窗口，只是一點點。這可能導致您的錯誤。

在resize方法添加一個延遲，所以您的客戶端可以處理所有的調整大小。

我不知道這是否會解決你的問題所在了，但很明智的，反正使用它，即使它不會解決您的問題！

來源

2015-12-18 11:31:09

綁定到調整窗口大小調用flexslider上的調整大小時的循環

回答

相關問題