为什么当我将函数添加到 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 的逻辑...myMethod 在 Snap.load 完成之前不可用。所以我不太确定这种方法是如何可用的，除非某处缺少代码。

我想你想做的是把 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);