首先區別一下setInterval() 和 setTimeout() 的區別
setInterval（）只要不清除是可以一直執行下去的，但是setTimeout（）在不清除的情況下也只能執行一次 （朋友，你以前的想法咋回事啊）
下面是體現案列：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>撤回案例</title> </head> <body> <input type = "button" value = "執行" onclick = "excute('e')"> <input type = "button" value = "撤回" onclick = "excute('s')"> <script type = "text/javascript"> //全劇變量在函數中的值可以在另一個函數中使用 //也就是說全局變量在一個棧中的值，可以在另一棧中使用 var timeId = null; function excute( para){ //第一個參數是要執行的函數(字符串形式)，第二個參數是在多少毫秒后執行 //setTimeout()函數只執行一次，執行時間是第二個參數所設定的時間 if(para=="e"){ timeId = window.setTimeout("showText()",5000); } else if(timeId!=null&¶=="s"){ //清除定時器 window.clearTimeout(timeId); } } function showText(){ alert("AD"); } </script> </body> </html>
這里使用了面向對象思想中的多態。
初學，有錯誤請指出，不勝感激！
以上，年少無知，寫的都是些什么喲
現在 settimeout() 和 setInterval() 的區別
setInterval() 的計時是從把回調函數放到隊列開始，不管它是否立刻執行。
詳細參見lay500這個博客：https://blog.csdn.net/czh500/article/details/80304841?utm_source=blogxgwz0
下面是具體表現（這是一個WebGl旋轉的正方形的例子）：
html文件：
1 <!DOCTYPE html> 2 <html> 3 4 <title>Rotating Square</title> 5 6 <script id="vertex-shader" type="x-shader/x-vertex"> 7 attribute vec4 vPosition; 8 uniform float theta; 9 10 void main() 11 { 12 float s = sin( theta ); 13 float c = cos( theta ); 14 15 gl_Position.x = -s * vPosition.y + c * vPosition.x; 16 gl_Position.y = s * vPosition.x + c * vPosition.y; 17 gl_Position.z = 0.0; 18 gl_Position.w = 1.0; 19 } 20 </script> 21 22 <script id="fragment-shader" type="x-shader/x-fragment"> 23 24 precision mediump float; 25 26 void main() 27 { 28 gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 ); 29 } 30 </script> 31 32 <script type="text/javascript" src="../Common/webgl-utils.js"></script> 33 <script type="text/javascript" src="../Common/initShaders.js"></script> 34 <script type="text/javascript" src="../Common/MV.js"></script> 35 <script type="text/javascript" src="rotatingSquare2.js"></script> 36 </head> 37 38 <body> 39 <button id="Direction">Change Rotation Direction</button> 40 41 <select id="Controls" size="3"> 42 <option value="0">Toggle Rotation Direction</option> 43 <option value="1">Spin Faster</option> 44 <option value="2">Spin Slower</option> 45 </select> 46 47 <canvas id="gl-canvas" width="512" height="512"> 48 Oops ... your browser doesn't support the HTML5 canvas element 49 </canvas> 50 </body> 51 </html>
js文件：
1 "use strict"; 2 3 var gl; 4 5 var theta = 0.0; 6 var thetaLoc; 7 8 var delay = 100; 9 var direction = true; 10 11 window.onload = function init() 12 { 13 var canvas = document.getElementById( "gl-canvas" ); 14 15 gl = WebGLUtils.setupWebGL( canvas ); 16 if ( !gl ) { alert( "WebGL isn't available" ); } 17 18 // 19 // Configure WebGL 20 // 21 gl.viewport( 0, 0, canvas.width, canvas.height ); 22 gl.clearColor( 1.0, 1.0, 1.0, 1.0 ); 23 24 // Load shaders and initialize attribute buffers 25 26 var program = initShaders( gl, "vertex-shader", "fragment-shader" ); 27 gl.useProgram( program ); 28 29 var vertices = [ 30 vec2( 0, 1 ), 31 vec2( -1, 0 ), 32 vec2( 1, 0 ), 33 vec2( 0, -1 ) 34 ]; 35 36 37 // Load the data into the GPU 38 39 var vBuffer = gl.createBuffer(); 40 gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer); 41 gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW); 42 43 // Associate out shader variables with our data buffer 44 45 var vPosition = gl.getAttribLocation( program, "vPosition"); 46 gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0); 47 gl.enableVertexAttribArray(vPosition); 48 49 thetaLoc = gl.getUniformLocation( program, "theta" ); 50 51 // Initialize event handlers 52 document.getElementById("Direction").onclick = function () { 53 direction = !direction; 54 }; 55 56 document.getElementById("Controls" ).onclick = function(event) { 57 switch( event.target.index ) { 58 case 0: 59 direction = !direction; 60 break; 61 case 1: 62 delay /= 2.0; 63 break; 64 case 2: 65 delay *= 2.0; 66 break; 67 } 68 }; 69 70 window.onkeydown = function(event) { 71 var key = String.fromCharCode(event.keyCode); 72 switch(key) { 73 case '1': 74 direction = !direction; 75 break; 76 77 case '2': 78 delay /= 15.0; 79 break; 80 81 case '3': 82 delay *= 15.0; 83 break; 84 } 85 }; 86 render(); 87 }; 88 89 function render() 90 { 91 gl.clear( gl.COLOR_BUFFER_BIT ); 92 93 theta += (direction ? 0.1 : -0.1); 94 gl.uniform1f(thetaLoc, theta); 95 96 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); 97 98 //setTimeout(function(){requestAnimFrame(render);}, delay); //不會卡頓 99 setInterval(function(){requestAnimFrame(render);}, delay); //會卡，很奇怪 100 }