Snap.load (... SVG로드 ... 내 메서드 ...)에 함수를 추가하는 이유 Snap.Load() 내부에있는이 메서드를 호출 할 수 없습니까?

Question

Snap.load (... SVG로드 ... 내 메서드 ...)에 함수를 추가하는 이유 Snap.Load() 내부에있는이 메서드를 호출 할 수 없습니까?

function myComponent() { 
    var paper = Snap("#svg3"); 

    Snap.load("svg/thermometer_o.svg", function (f) { 
     paper.append(f); 
     paper.selectAll("#empty").attr({fill: "#f00"}); 

     myMethod = function(perc){ 
      var v= 350 * ((perc)/100); 
      var py = (557 - v); 
      animate = function(){ 
      paper.selectAll("#empty").animate({height: v, y: py, x: "340"}, 3000);}; 
    };  


    }); 
} 


function onPageLoad() { 
    componentThermometer().myMethod(40); 

} 

Answer 1

몇 가지 문제가 있습니다. 어쩌면 일부 비트는 SO에 붙여 넣기와 관련이 있지만, 그 경우 언급 할 것입니다.

componentThermometer()는 무엇입니까? 어디에도 정의되어 있지 않습니다.

어떻게 든 myComponent를 호출하면 이벤트 순서에 대해 생각해 봐야합니다. Snap.load는 비동기식이므로 시간이 걸릴 수 있습니다.

그래서 페이지로드가 완료되면 componentThermometer.MyMethod()를 호출합니다.

우리는 myComponent 논리를 생각하면 ... Snap.load가 끝날 때까지 myMethod를 사용할 수 없습니다. 따라서 어딘가에 코드가 누락되면 뭔가가 일어나지 않는 한, 그 방법이 어떻게 사용 가능한지 잘 모르겠습니다.

당신이 원한다고 상상 한 것이 있다면, myMethod를 Snap.load 핸들러 밖에 두는 것입니다. (저는 현재 그곳에있을 이유가 전혀 없습니다.) Snap.load가 완료된 후에 만 ​​myMethod를 호출하기를 원할 수 있습니다 (현재로드 후에 정의되는 것과 반대).

jsfiddle의 기초만으로 테스트 예제를 얻을 수 있다면 도움이 될 것입니다. 여기 codepen에서

, 그것은하지 않았기 때문에

var paper = Snap("#svg3"); 

function componentThermometer(perc) {   
    Snap.load("https://raw.githubusercontent.com/chovancova/project/master/public_html/teplomer_1/svg/thermometer_o.svg", function(f){ 
     paper.append(f); 
     paper.selectAll("#empty").attr({fill:"#f00"}); 

     animateThermometer(perc);  
    }); 
}; 


function animateThermometer(perc) { 
     var vyska = 350*(perc/100); 
     var py = 557-vyska ; 
     paper.selectAll("#empty").animate({height: vyska, y:py, x:"342.882"}, 800); 
}; 

componentThermometer(50);