javascript - 如果 html 类 == '600px' 则执行一个 js 函数

Question

我试图通过 html 样式属性在 js 中执行一个函数，但无法让它工作。

我有一个 js 函数(例如 jscode)，它使用快捷方式。我想规避这一点，当网页上的 html 类有 600px 时(加载栏有 600px，当它完成时，代码应该延迟 1ms 运行)

function test() {
    setTimeout(function () { jscode(); }, 1);
}

var htmltest = document.getElementsByClassName("loadingbar");
var htmlteststyle = htmltest[0].style;

if (htmlteststyle.width == '600px') {
    console.log("success");
    test();
}

它根本不工作，控制台消息不出现并且 js 文件仅在出现此代码段之前自行执行。

我刚开始玩js和html，不知道我哪里错了，也许这是一个完全错误的方法？

感谢任何建议。

Answer 1

是的，你的方法完全倒退了。尝试监听样式的更改真的很糟糕，无论您是使用轮询(这是您当前正在做的)，还是通过变异观察器。原因是因为它比需要的更复杂，并且会损害您的 DOM 性能。

相反，您想绑定(bind)更新进度条的代码。它应该有一个进度变量，因此只需在它达到 100% 时运行您的代码。

示例代码:

// Inside the code that updates the bar
if (progress === 100 && !hasCompleted){
    hasCompleted = true;
    console.log('success!');
}