setTimeout() 和全局变量的进一步理解、setInterval()

首先区别一下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&&para=="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 }

 

posted @ 2017-07-04 22:59  学习丶笔记  Views(2488)  Comments(0)  Edit  收藏  举报