jQuery的慢款式更新

我有一個有點麻煩，讓我調整大小事件同步。基本上，$ M.resize更新div的寬度（css），然後我想要$ API.resize讀取新的大小並相應地更新其元素。但是，如果我設置窗口大小調整事件（見下文），然後立即觸發窗口的resize事件，$ API.resize沒有得到任何新的寬度信息 - 彷彿$ M.resize尚未完成更新。 $ API.resize通過$（「＃main」）。css（「width」）獲取新的寬度信息。我可以通過下面的解決方法使用setTimeout來實現它的唯一方法。有沒有更好的方法來做到這一點？jQuery的慢款式更新

// on page load 
$(function() { 
    $(window).resize(function() { 
     $M.resize(); 
     $API.resize(); 
    }); 
    setTimeout(function() { 
     $(window).resize(); 
    }, 100); 
}); 

// $API.resize 
function() { 
    var pageWidth = $M.width(); 
    console.log("pageWidth = " + pageWidth); 
    $("#atmoGrid").css("width", pageWidth); 
    $(".atmoSector") 
     .css("width", pageWidth/5-2) 
     .css("height", pageWidth/5-2); 
} 

// $M.resize 
function() { 
    // refresh screen dimensions 
    width = Math.min(screen.availWidth, window.innerWidth); 
    height = Math.min(screen.availHeight, window.innerHeight); 
    smallScreen = (width < smallWidth); 
    fontScale = (smallScreen) ? 3 : 1; 

    // check if screen is small 
    if (smallScreen) { 
     $("#main").css("width", "100%"); 
    } else { 
     $("#main").css("width", smallWidth + "px") 
    } 
    $("#main").css("font-size", $M.font(18)); 
} 

// $M.width 
function() { 
    var width = $("#main").css("width"); 
    return parseInt(width); 
}

來源

2012-08-27 cobbdb

我認爲你需要向我們展示一些代碼的，現在它只是一些變量和resize事件的觸發，哪來的功能設置CSS等？ – adeneo

$ API.resize（）;不會從$ M.resize（）中獲取任何更改，因爲它超出了範圍。使用一些全局變量 – ShaunOReilly

K I增加了$ M.resize和$ API.resize功能機構以及其他幾個人。我應該注意$ M和$ API都是全局的。 – cobbdb

試試這個：

// on page load 
$(function() { 
    $(window).resize(function() { 
     $M.resize(); 
    }); 
}); 

// $API.resize 
function (mWidth, mHeight) { 
    var pageWidth = mWidth; 
    console.log("pageWidth = " + pageWidth); 
    $("#atmoGrid").css("width", pageWidth); 
    $(".atmoSector") 
     .css("width", pageWidth/5-2) 
     .css("height", pageWidth/5-2); 
} 

// $M.resize 
function() { 
    // refresh screen dimensions 
    width = Math.min(screen.availWidth, window.innerWidth); 
    height = Math.min(screen.availHeight, window.innerHeight); 
    smallScreen = (width < smallWidth); 
    fontScale = (smallScreen) ? 3 : 1; 

    // check if screen is small 
    if (smallScreen) { 
     $("#main").css("width", "100%"); 
    } else { 
     $("#main").css("width", smallWidth + "px") 
    } 
    $("#main").css("font-size", $M.font(18)); 

    $API.Resize(smallWidth, someheight); 
} 

// $M.width 
function() { 
    var width = $("#main").css("width"); 
    return parseInt(width); 
}

心連心

來源

2012-08-27 04:31:38 ShaunOReilly

jQuery的慢款式更新

回答

相關問題