如何在Three.js loader.parse方法中将附加参数传递给回调函数

Question

在three.js中的Loader对象的

Parse方法允许您设置在解析过程完成时调用的回调函数。 将此回调称为传递给其的唯一参数就是被解析的对象。

我的问题是我需要另一个参数传递给回调。 这是因为我在循环中使用了parse方法，并且我想使用一个变量的特定值创建许多回调。

如果我在循环中但在回调之外设置该值，则不可避免地要执行回调，显然该值始终是循环中最后设置的值。

这是代码：

<div class="form-wrapper">
        <form method="POST" action="/character-match">
            <fieldset>
                <h2 class="title-xl">Jouw voorkeur</h2>
                <div class="toggle">
                   <label for="toggle" class="label title-m">Mijn match moet dezelfde aandoening hebben</label>
                   <input id="yes" type="radio" class="tab" name="a" value="yes">
                   <label class="label first" for="yes" class="radio-inline">Absoluut</label>
                   <input id="maybe" type="radio" class="tab" name="a" value="maybe">
                   <label class="label" for="maybe" class="radio-inline">Zou fijn zijn</label>
                   <input id="no" type="radio" class="tab" name="a" value="no">
                   <label class="label last" for="no" class="radio-inline">Nee</label>
                </div>

                <div class="toggle">
                   <label for="toggle" class="label title-m">Ik ben opzoek naar</label>
                   <input id="friendship" type="radio" class="tab" name="b" value="friendship">
                   <label class="label first" for="friendship" class="radio-inline">Vriendschap</label>
                   <input id="love" type="radio" class="tab" name="b" value="love">
                   <label class="label" for="love" class="radio-inline">Liefde</label>
                   <input id="both" type="radio" class="tab" name="b" value="both">
                   <label class="label last" for="both" class="radio-inline">Beide</label>
                </div>

                <div class="toggle">
                   <label for="toggle" class="label title-m">Mijn match moet in dezelfde stad wonen</label>
                   <input id="yes2" type="radio" class="tab" name="c" value="yes">
                   <label class="label first" for="yes2" class="radio-inline">Ja</label>
                   <input id="no2" type="radio" class="tab" name="c" value="no">
                   <label class="label last" for="no2" class="radio-inline">Nee</label>
                </div>

                <a href="#" class="hide" name="back" onclick="previousStep()">Terug</a href="#">
                <a href="#" class="hide" name="next" onclick="nextStep()">Verder</a href="#">
                <div class="bullet-container"></div>
            </fieldset>

            <fieldset>
                <h2 class="title-xl">Jouw karakter 1/2</h2>
                <div class="toggle">
                   <label for="toggle" class="label title-m">Ik ben</label>
                   <input id="introvert" type="radio" class="tab" name="d" value="introvert">
                   <label class="label first" for="introvert" class="radio-inline">Introvert</label>
                   <input id="inbetween" type="radio" class="tab" name="d" value="inbetween">
                   <label class="label" for="inbetween" class="radio-inline">Ertussen</label>
                   <input id="extrovert" type="radio" class="tab" name="d" value="extrovert">
                   <label class="label last" for="extrovert" class="radio-inline">Extrovert</label>
                </div>

                <div class="toggle">
                   <label for="toggle" class="label title-m">Ik ben</label>
                   <input id="shy" type="radio" class="tab" name="f" value="shy">
                   <label class="label first" for="shy" class="radio-inline">Verlegen</label>
                   <input id="not-shy" type="radio" class="tab" name="f" value="not-shy">
                   <label class="label last" for="not-shy" class="radio-inline">Niet verlegen</label>
                </div>

                <div class="toggle">
                   <label for="toggle" class="label title-m">Ik ben</label>
                   <input id="organised" type="radio" class="tab" name="g" value="organised">
                   <label class="label first" for="organised" class="radio-inline">Georganiseerd</label>
                   <input id="free" type="radio" class="tab" name="g" value="free">
                   <label class="label last" for="free" class="radio-inline">Vrij</label>
                </div>

                <a href="#" class="hide" name="back" onclick="previousStep()">Terug</a href="#">
                <a href="#" class="hide" name="next" onclick="nextStep()">Verder</a href="#">
                <div class="bullet-container"></div>
            </fieldset>

            <fieldset>
                <h2 class="title-xl">Jouw karakter 2/2</h2>
                <div class="toggle">
                   <label for="toggle" class="label title-m">Ik heb</label>
                   <input id="impatient" type="radio" class="tab" name="h" value="impatient">
                   <label class="label first" for="impatient" class="radio-inline">Veel geduld</label>
                   <input id="patient" type="radio" class="tab" name="h" value="patient">
                   <label class="label last" for="patient" class="radio-inline">Een kort lontje</label>
                </div>

                <div class="toggle">
                   <label for="toggle" class="label title-m">Ik ben</label>
                   <input id="clean" type="radio" class="tab" name="i" value="clean">
                   <label class="label first" for="clean" class="radio-inline">Opgeruimd</label>
                   <input id="dirty" type="radio" class="tab" name="i" value="dirty">
                   <label class="label last" for="dirty" class="radio-inline">Onopgeruimd</label>
                </div>

                <div class="toggle">
                   <label for="toggle" class="label title-m">Ik ben</label>
                   <input id="sporty" type="radio" class="tab" name="j" value="sporty">
                   <label class="label first" for="sporty" class="radio-inline">Sportief</label>
                   <input id="lazy" type="radio" class="tab" name="j" value="lazy">
                   <label class="label last" for="lazy" class="radio-inline">Niet sportief</label>
                </div>

                <a href="#" class="hide" name="back" onclick="previousStep()">Terug</a href="#">
                <a href="#" class="hide" name="next" onclick="nextStep()">Verder</a href="#">
                <input type="submit" name="submit" value="Match mij!" onclick="">
                <div class="bullet-container"></div>
            </fieldset>
        </form>
    </div>

有人可以帮我找到解决办法吗？

Answer 1

阅读closures in Javascript

与C / C ++之类的语言不同，在JavaScript中“关闭变量”很简单，因此您不需要在JavaScript中进行回调的额外参数，因为您可以始终使用“闭包”“结束”回调中需要访问的任何变量

以您的情况

for(var foldcont_index in foldcont) {

    var foldit= foldcont[foldcont_index];

    if(foldit.isDirectory()) { loadBFiles(fold+'/'+foldit.name); }

    if(foldit.isFile()) {

      var buigltf= fs.readFileSync(fold+'/'+foldit.name, 'utf8');
      loader.parse(
          buigltf,
          undefined,
          function(oname) {
              return function(o) {
                  var oname= // !!! before issue with foldit.name
                  objectstank['xxx_'+oname]= o;
                  loadpoint= loadpoint+loadpercentage;
                  loadbar.set(loadpoint);
                  if(loadpoint>= 100) { document.getElementById("load- bar").style.display= 'none'; }
              };
          }(foldit.name),
          undefined
      );

    }
}

可能会工作。 （我可以阅读您的代码）。我在Three.js中没有这个Loader对象。有很多XXXLoader对象。不知道您正在使用哪个。

此模式

function(var1, var2, var3) {
   return function() {
      // do something with var1, var2, var2
   };
}(value1, value2, value2);

是结束值的常见模式。该代码是一个函数，该函数返回在var1，var2和var3上“关闭”的函数。

因此您可以将返回的函数传递给回调。长手例子

function makeCallback(var1, var2, var3) {
   return function() {
     console.log(var1, var2, var3);
   };
}

const fn = makeCallback('Hello', 'World', '!');
setTimeout(fn, 1000);

内联版本

for (let i = 1; i <= 4; ++i) {
  setTimeout(function(var1) {
     return function() {
        console.log(var1);
     };
  }(i), i * 500);
}