0

toggleTest是一个函数：

function toggleTest() {
    if(document.testRunning) {
        stopTest();
    } else {
        startTest();
    }
};

当我点击按钮时，我激活了这条线：

<input type="button" onclick="toggleTest()" id="toggleBtn" value="Stop Test" /><br />

我得到错误Uncaught ReferenceError: toggleTest is not defined我不明白如果定义了函数我为什么会得到错误。

演示 jsFiddle

所有代码：

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Drawing Speed Tests</title>
<script type="text/javascript">
window.onload=function(){
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();
window.cancelRequestAnimFrame = ( function() {
    return window.cancelAnimationFrame          ||
        window.webkitCancelRequestAnimationFrame    ||
        window.mozCancelRequestAnimationFrame       ||
        window.oCancelRequestAnimationFrame     ||
        window.msCancelRequestAnimationFrame        ||
        clearTimeout
} )();

function toggleTest() {
    if(document.testRunning)
    {
        stopTest();
    }
    else
    {
        startTest();
    }
};

function changeTestType() {
    stopTest();
    startTest();
}

function startTest() {
    if(toggleBtn == "Start Test"){
        var radios = document.getElementsByName("testType");
                for(var i = 0; i < radios.length; i++)
                {
                    if(radios[i].checked == true)
                    {
                        document.testType = radios[i].id;
                        document.useRAF = true;
                        break;
                    }
                }
        if(document.useRAF){
            document.testInterval = setInterval(function() {runTest();}, 1000/60);}
            document.testRunning = true;    
            runTest();
        }
}

function stopTest() {
    if(!document.useRAF)
        clearInterval(document.testInterval);
    else
        cancelRequestAnimFrame(document.requestAnimFrameId);
    document.testRunning = false;
    document.getElementById("toggleBtn").value = "Start Test";
}

function runTest() {
    if(document.useRAF)
        document.requestAnimFrameId = requestAnimFrame(runTest);
        document.testType();
}

var ToggleBtn = document.getElementById("toggleBtn").value;
}
</script>
</head>
<body >
    <div id="canvasContainer" style="position: relative;">
        <canvas id="testCanvas" width="180" height="50" style="background-color:black">Sorry your browser doesn't support the HTML5 canvas!</canvas>
    </div>
    <div id="debugData" style="position: relative;">
        <div id="debugControls" style="position:absolute;top:60px;left:0">
            <form id="testForm">
            <input type="button" onclick="toggleTest()" id="toggleBtn" value="Stop Test" /><br />
            <label><input type="checkbox" id="rAF" onclick="changeTestType()" />Use requestAnimationFrame</label><br /><br />
            <label><input type="radio" onchange="changeTestType()" name="testType" id="functionA" />functionA</label><br />
            <label><input type="radio" onchange="changeTestType()" name="testType" id="functionB" />functionB</label><br />
            <label><input type="radio" onchange="changeTestType()" name="testType" id="functionC" />functionC</label><br />
            <label><input type="radio" onchange="changeTestType()" name="testType" id="functionD" />functionD</label><br />
            </form>
        </div>
    </div>
</body>
</html>
4

1 回答 1

2

因为您将代码放在 window.onload 中，它会在该函数范围内创建函数和 toggleTest 定义！只需将其移动到全局范围内http://jsfiddle.net/TEt8R/1/

//change to be in body
于 2013-03-23T23:25:47.513 回答