Question

我有一个简单的javascript / jquery任务，它在页面加载时运行。

当我点击刷新时页面上没有任何变化 - 我只是给它一些合理的测试 - 但是我注意到有时其中一个功能没有正确完成。

以下是功能：

$(document).ready(function () {
    initialise();
    load();
});

// 1. Cache the main selectors just in case the window is resized
function initialise() {
    $banners = $("#header .banner");
}

// 2. Loop through each of the elements
function load() {
    $banners.each(function () {
        setBannerStyle($(this));
    });
}

// 3. Add attributes to each of the banner elements
function setBannerStyle($selector) {

    icon = $selector.find(".icon").first().length;
    rows = getRows($selector.find(".message").first());

    $selector.attr({
        "data-icon": icon,
        "data-rows": rows
    });
}

// 4. Helper to do the workings out
function getRows($selector) {

    var height = $selector.height();
    var lineHeight = parseFloat($selector.css("line-height"));
    var rows = Math.round(height / lineHeight);

    return rows > 2 ? 2 : rows;
}

正如您所看到的，没有复杂性，要循环的元素数量很少超过一个。

但是，在极少数情况下，行数会返回NAN。如何确保始终返回有效数字（或至少提高其未发生的可能性）。它目前在我的四核i5处理器上大约每10个失败一次。

要说清楚，我不会在失败时设置默认值 - 我想尝试阻止它在第一时间失败。

任何建议都表示赞赏，因为我对javascript不太满意。

Answer 1

获取.outerHeight()

时，请尝试使用.height()代替var height

此外，请确保在尝试解析line-height元素之前设置$selector变量，并且$selector变量也未定义。

如果由于任何原因未设置任何变量，您将获得NaN结果。

你可以console.log(variable)所有这些来查明正在发生的事情，并在某些事情不起作用时查看变量状态。

听起来这可能是竞争条件，因此如果上述建议不起作用，请尝试使用setTimeout(function, interval)来延迟执行这些功能。

Answer 2

我发现这个代码看起来很有效 - 替换了document.ready（）并且每分钟都会敲打几百次。

let stateCheck = setInterval(() => {
  if (document.readyState === 'complete') {
    clearInterval(stateCheck);
    // document ready
  }
}, 100);

信用证转到：this site

在javascript中刷新页面有时会导致NAN

2 个答案: