jQuery缓慢的样式更新

我在同步调整大小事件时遇到了一些问题。基本上，$M.resize更新div的宽度（css），然后我希望$API.resize读取新的大小并相应地更新其元素。但是，如果我设置了窗口调整大小事件（见下文），然后立即触发窗口的调整大小事件，$API.resize不会获得任何新的宽度信息，就好像$M.resize没有完成更新一样$API.resize通过$（“#main”）.css（“宽度”）获取新的宽度信息；我能让它工作的唯一方法是使用下面的setTimeout解决方法。。有更好的方法吗

// 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);
}

//页面加载时
$（函数（）{
$（窗口）。调整大小（函数（）{
$M.resize（）；
$API.resize（）；
});
setTimeout（函数（）{
$（窗口）.resize（）；
}, 100);
});
//$API.resize
函数（）{
var pageWidth=$M.width（）；
console.log（“pageWidth=“+pageWidth”）；
$（“#atmoGrid”）.css（“宽度”，pageWidth）；
$（“.atmoSector”）
.css（“宽度”，页面宽度/5-2）
.css（“高度”，页面宽度/5-2）；
}
//百万美元
函数（）{
//刷新屏幕尺寸
宽度=Math.min（screen.availWidth，window.innerWidth）；
高度=数学.min（screen.availHeight，window.innerHeight）；
小屏幕=（宽度<小宽度）；
fontScale=（小屏幕）？3:1；
//检查屏幕是否小
if（小屏幕）{
$（“#main”）.css（“宽度”、“100%”）；
}否则{
$（“#main”）.css（“宽度”，smallWidth+“px”）
}
$（“#main”）.css（“字体大小”，$M.font（18））；
}
//米宽
函数（）{
变量宽度=$（“#主”）.css（“宽度”）；
返回parseInt（宽度）；
}

试试这个：

// 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);
}

//页面加载时
$（函数（）{
$（窗口）。调整大小（函数（）{
$M.resize（）；
});
});
//$API.resize
功能（mWidth、mHight）{
var pageWidth=mWidth；
console.log（“pageWidth=“+pageWidth”）；
$（“#atmoGrid”）.css（“宽度”，pageWidth）；
$（“.atmoSector”）
.css（“宽度”，页面宽度/5-2）
.css（“高度”，页面宽度/5-2）；
}
//百万美元
函数（）{
//刷新屏幕尺寸
宽度=Math.min（screen.availWidth，window.innerWidth）；
高度=数学.min（screen.availHeight，window.innerHeight）；
小屏幕=（宽度<小宽度）；
fontScale=（小屏幕）？3:1；
//检查屏幕是否小
if（小屏幕）{
$（“#main”）.css（“宽度”、“100%”）；
}否则{
$（“#main”）.css（“宽度”，smallWidth+“px”）
}
$（“#main”）.css（“字体大小”，$M.font（18））；
$API.Resize（smallWidth，someheight）；
}
//米宽
函数（）{
变量宽度=$（“#主”）.css（“宽度”）；
返回parseInt（宽度）；
}

---

hth

我认为您需要向我们展示更多的代码，现在只是一些变量和调整大小事件的触发，设置CSS等的函数在哪里？$API.resize（）；不会从$M获取任何更改。resize（）；，因为它超出了范围。使用一些全局变量sk我为$M.resize和$API.resize以及其他几个添加了函数体。我应该注意到，$M和$API都是全局的。也许在$M.resize（）中实现一些回调，在更新完成后触发，你会得到类似$M.resize（$API.resize）的东西？也许从$M.resize的最后一行调用API，其中两个参数是你需要的元素的宽度和高度？