Question

我想在onmouseover =“ParentFunction（）;”上调用该函数然后杀死它onmouseout =“killParent（）;”。

注意：在我的代码中，父函数名为initiate（）;而杀手函数叫做reset（）;它位于脚本底部的父函数之外。

我不知道如何杀死intitiate（）函数我的第一个猜测是：

  var reset = function(){
  return initiate(); 
  };

这是我的源代码：任何建议和帮助表示赞赏。

      <!doctype html>

<html>

  <head>
  <title> function/event prototype </title>
    <link rel="stylesheet" type="text/css" href="styling.css" />




  </head>


  <body>


     <h2> <em>Fantastical place<br/>prototype</em> </h2>

    <div id="button-container">
         <div id="button-box">   
             <button id="activate" onmouseover="initiate()" onmouseout="reset();" width="50px" height="50px" title="Activate">  </button> 
         </div>  

         <div id="text-box"> 
         </div>
    </div>

    <div id="container">

        <canvas id="playground" width="200px" height="250px">
        </canvas>

        <canvas id="face" width="400px" height="200px">
        </canvas>

    <!-- <div id="clear"> </div> -->
    </div>


     <script> 
    alert("Welcome, there are x entries as of" +""+new Date().getHours());




 //global scope
  var i=0; 

var c1 = []; //c is short for collect
var c2 = [];
var c3 = [];
var c4 = [];
var c5 = [];
var c6 = [];

var initiate = function(){ //the button that triggers the program
  var timer = setInterval(function(){clock()},90); //copy this block for ref.


 function clock(){



  i+=1; 

   var a = Math.round(Math.random()*200); 
   var b = Math.round(Math.random()*250); 
   var c = Math.round(Math.random()*200); 
   var d = Math.round(Math.random()*250); 
   var e = Math.round(Math.random()*200); 
   var f = Math.round(Math.random()*250); 
   c1.push(a); 
   c2.push(b);
   c3.push(c);
   c4.push(d);
   c5.push(e);
   c6.push(f);

 // document.write(i);




    var c = document.getElementById("playground");
var ctx = c.getContext("2d"); 

   ctx.beginPath(); 
   ctx.moveTo(c3[i-2], c4[i-2]);
   ctx.bezierCurveTo(c1[i-2],c2[i-2],c5[i-2],c6[i-2],c3[i-1], c4[i-1]);
  // ctx.lineTo(c3[i-1], c4[i-1]); 

   if(a<200){
      ctx.strokeStyle="#FF33CC";   
   }
   else if(a<400){

     ctx.strokeStyle="#FF33aa";
   }
   else{
      ctx.strokeStyle="#FF3388";

   }



   ctx.stroke(); 

   document.getElementById("text-box").innerHTML=i+"<p>Thoughts.</p>"; 
  if(i===20){
    //alert("15 reached");
    clearInterval(timer);//to clearInterval must be using a global scoped variable.
   return; 
  }

 }; //end of clock











//setInterval(clock,150);
  var targetFace = document.getElementById("face");
  var face = targetFace.getContext("2d");


  var faceTimer = setInterval(function(){faceAnim()},80); //copy this block for ref. global scoped.

  function faceAnim(){

     face.beginPath(); 

  face.strokeStyle="#FF33CC";

  face.moveTo(100,104); //eye line
  face.bezierCurveTo(150,125,250,125,300,104);



  face.moveTo(200,1); //centre line
  face.lineTo(200,400);

  face.moveTo(125,111);//left eye lid
  face.bezierCurveTo(160,135,170,130,185,120);



  face.moveTo(150,116);//left eye 
  face.bezierCurveTo(155,125,165,125,170,118);

    face.moveTo(275,111);//right eye lid
face.bezierCurveTo(240,135,230,130,215,120);



  face.moveTo(250,116);//right eye 
  face.bezierCurveTo(245,125,235,125,230,118);

  face.moveTo(195, 118); //left nose
  face.lineTo(190, 160);
  face.lineTo(200,170);

  face.moveTo(190,160); //left nostroll
  face.lineTo(180,160);
  face.lineTo(191,154);

   face.moveTo(180,160); //left lower nostrol
  face.lineTo(200,170);

   face.moveTo(205, 118); //right nose
  face.lineTo(210, 160);
  face.lineTo(200,170);

  face.moveTo(210,160); //right nostroll
  face.lineTo(220,160);
  face.lineTo(209,154);

  face.moveTo(220,160); //right lower nostrol
  face.lineTo(200,170);



  face.moveTo(200,140); //outer triad
  face.lineTo(170, 100);
   face.lineTo(230, 100);
   face.lineTo(200, 140);

   face.moveTo(200,145); //outer triad drop shadow
  face.lineTo(170, 100);
   face.lineTo(230, 100);
   face.lineTo(200, 145);

    face.moveTo(200,130); //inner triad
  face.lineTo(180, 105);
   face.lineTo(220, 105);
   face.lineTo(200, 130);

  //face.lineWidth =0.6; 

        face.moveTo(280,111);//outer right eye lid
face.bezierCurveTo(240,140,230,135,210,120);

     face.moveTo(120,111);//outer left eye lid 
  face.bezierCurveTo(160,140,170,135,190,120);








    face.moveTo(162,174); //upper mouth line
  face.bezierCurveTo(170,180,230,180,238,174);

   face.moveTo(165,175); //mouth line bottom
  face.bezierCurveTo(190,Math.floor(Math.random()*25+180),210,Math.floor(Math.random()*25+180),235,175);


    face.moveTo(232,204); //head shape
    face.lineTo(340, 20);

        face.moveTo(168,204); //head shape
    face.lineTo(60, 20);

  face.stroke(); //exicute all co-ords.



  }; //end of face anim








    var clearFace = function(){

   document.getElementById('face').getContext('2d').clearRect(0, 0, 700, 750);

};

setInterval(clearFace,90); 






}; //end of parent function




    var reset = function(){

   document.getElementById('playground').getContext('2d').clearRect(0, 0, 700, 750);
  //clearInterval(faceTimer); 
   //delete initiate(); 
  }; 











    </script>

  </body>

</html>

Answer 1

在reset()中设置变量，例如stop = true;

然后在faceTimer或其他任何地方检查...

总的来说，结构应该是这个，

///Globals
var queue = [], stop = false;
// drawing function ....
function draw(){
 if(stop || !Boolean(queue) || !Boolean(queue.length)) return;
 var current = undefined;
 while(Boolean(current = queue.pop()))
 {
    if(!stop){ 
     current(); 
     var nextTime = Number(current.nextInterval); 
     if(nextTime > 0) setTimeout(nextTime , draw || this); 
    }
    else if(Boolean(current.shouldBreak)) break;
 }
}

其中current是一个排队等待从faceTimer

绘图的函数

e.g。

var work = function(){ clock(); faceAnim(); queue.push(this); }; work.nextInterval = 500; work.shouldBreak = false; queue.push(work);

然后启动变为var initiate = work; initiate();;

我的示例是@ http://jsfiddle.net/JtHQ4/18/

使用onmouseover和onmouseout事件调用和终止父函数

1 个答案: