在过去的一周里，我一直在教自己Javascript for HTML . 主要来自w3schools . 我正在尝试制作两个函数 - 一个用于在body / window onload事件上运行，然后这将触发更新函数，该函数将每10/100步骤无限重复 .
我基本上是在制作一个受Javascript严格控制的网站 . 我需要创建这个模板，用于我计划构建的系统（响应式布局内容，屏幕调整大小） .
初始启动功能不会影响任何div . 为什么是这样？
<!DOCTYPE html>
<html>
<head>
<script>
// STARTUP
function startupClass(classnm)
{
// scan through all divs, altering size accordingly.
classid = document.getElementsByClassName(classnm);
for(i=0;i<classid.length;i+=1)
{
// apply style to each div class
classid[i].style.position="absolute";
classid[i].style.width=(screen.availWidth/classid.length);
classid[i].style.height="300px";
classid[i].style.top="0px";
classid[i].style.left=i*(screen.availWidth/classid.length);
classid[i].style.backgroundColor="#f3f3f3";
}
setTimeout(updateClass(classnm),1);
}
// jump to update function (Which then automatically updates, every step)
// UPDATE FUNCTION
function updateClass(classnm);
{
setTimeout(updateClass(classnm),10);
}
window.onload = startupClass("newclass");
</script>
</head>
<body onload="startupClass('newclass');">
<div class="newclass"></div>
<div class="newclass"></div>
<div class="newclass"></div>
<div class="newclass"></div>
</body>
</html>
我可能犯了一个明显的错误，但window.onload或body标签onload都没有触发该函数？
如果这是一个明显的错误，请原谅我 - 我对Javascript很新 .
回答：
语法有一些错误 - 首先是在updateClass（）之后意外放置分号; {} - 然后setTimeout（）语法出错 - 这是'setTimeout（updateClass（classnm），1）;'，更改为'setTimeout（updateClass，1，classnm）;' .
控制台不再丢失任何错误 - 但div仍然没有被设置样式 . 这是因为startupClass（）函数在放置div之前运行！为了解决这个问题，我简单地做了一个非常基本的函数，然后在1步之后触发了startupClass函数：
<head>
<script>
//--------------STARTUP
function startupClassInit(classnm)
{
setTimeout(startupClass,1,classnm);
}
function startupClass(classnm)
{
// scan through all divs, altering size accordingly.
classid = document.getElementsByClassName(classnm);
for(i=0;i<classid.length;i+=1)
{
// apply style to each div class
classid[i].style.position="absolute";
classid[i].style.width=(screen.availWidth/classid.length)+"px";
classid[i].style.height="300px";
classid[i].style.top="0px";
classid[i].style.left=i*(screen.availWidth/classid.length)+"px";
classid[i].style.backgroundColor="#AA0000";
}
// jump to update function (Which then automatically updates, every step)
setTimeout(updateClass,1,classnm);
}
//--------------UPDATE FUNCTION
function updateClass(classnm)
{
classid = document.getElementsByClassName(classnm);
for(i=0;i<classid.length;i+=1)
{
}
setTimeout(updateClass,100,classnm);
}
window.onload = startupClassInit("newclass");
</script>
</head>
这现在工作正常:)谢谢大家的建议和帮助 .
3 回答
我真的会说，看看jQuery .
这将在页面加载后运行函数或将函数绑定到元素，因为有时您想要向元素添加一些功能但在页面创建期间它们不存在但功能已经存在:)
需要使用setInterval而不是setTimeOut .
首先，你的语法有错误：
删除分号，因为函数将不包含任何正文（将其渲染为未定义，这就是为什么没有发生任何事情的原因） .
我将删除正文的onload-handler以及在脚本标记内指定window.onload，实际上是两次触发它 .
然后是递归问题，“startupClass”-method在调用updateClass之前调用1毫秒的超时，而updateClass在调用自身之前又有10毫秒的超时 . 你在这里尝试做什么？
另一件事是你在超时已经过去时分配回调函数的方式，当你输入updateClass（classnm）时，你实际上正在执行updateClass函数（并将它的返回值返回到“setTimeout”，在这种情况下，它是无效的函数没有返回任何值），你想要做的是将REFERENCE传递给函数（使用它的名字），所以你应该键入的是：
当您反复调用该方法时，这会导致RangeError .
如果希望以固定间隔重复调用处理程序而不在每次调用时手动调用它，则可能需要查看setInterval .
旁注：你提到你想要听布局大小的变化，如果这是以固定间隔轮询的唯一原因，那么在窗口上添加一个监听器就可以更高效了“（on）resize “和”（on）orientationchange“当用户实际调整窗口大小时触发的事件 . 这省略了在重复轮询中牺牲CPU周期的需要，并通过比较值来检查这些事件是否实际发生 .