행사 정보 키네틱 JS 듣기

다음은 코드입니다. 내 서클에 마우스를 올리면 '서클 0'과 '서클 1'을 각각 표시해야합니다. 그러나 그들은 모두 "서클 1"을 보여줍니다.행사 정보 키네틱 JS 듣기

이유는 무엇이며 어떻게 고칠 수 있습니까?

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="container"></div> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script> 
    <script defer="defer"> 
     function writeMessage(message) { 
     text.setText(message); 
     layer.draw(); 
     } 
     var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 578, 
     height: 200 
     }); 
     var layer = new Kinetic.Layer(); 
     var text = new Kinetic.Text({ 
     x: 10, 
     y: 10, 
     fontFamily: 'Calibri', 
     fontSize: 24, 
     text: '', 
     fill: 'black' 
     }); 

     for (var n=0; n<2; ++n) 
     { 
      var circle = new Kinetic.Circle({ 
      x: 100 + n * 100, 
      y: stage.height()/2, 
      radius: 30, 
      fill: 'red', 
      stroke: 'black', 
      strokeWidth: 4 
      }); 
      var txt = 'Circle ' + n; 
      circle.on('mouseover', function() { 
      writeMessage(txt); 
      }); 
      circle.on('mouseout', function() { 
      writeMessage(''); 
      }); 
      layer.add(circle); 
     } 

     layer.add(text); 
     stage.add(layer); 
    </script> 
    </body> 
</html>

출처

2014-04-09 mitnk

키네틱스에서는 문제가되지 않지만 자바 스크립트 클로저와 관련이 있습니다.

은 현재 루프에서 함수를 정의하고 있습니다 :

for (var n=0; n<2; ++n) { 
    ... 
    var txt = 'Circle ' + n; 
    circle.on('mouseover', function() { 
    writeMessage(txt); 
    }); 
    ... 
}

이 변수 txt는 복사되지 않습니다 당신이 당신의 함수를 선언 할 때. 익명 함수가 호출 될 때 의 값은 for이 완료되고 루프 중에 txt이 수정 되었기 때문에 'Circle 1'입니다.

당신은 중간 기능이 필요합니다 :

var displayMessage = function (circleNumber) { 
    var txt = 'Circle ' + circleNumber; 
    return function() { 
    writeMessage(txt); 
    }; 
};

및 바인딩 이벤트는 지금 : 당신이 더 많은 것을에 읽으려면 http://jsfiddle.net/GApn7/

circle.on('mouseover', displayMessage(n));

이 바이올린을 참조하십시오 이 게시물을 읽으십시오. How do JavaScript closures work?

출처

2014-04-09 16:08:27

답변

관련 문제