javascript - 一旦满足条件，如何停止滴答函数在一帧中执行代码？

Question

我在 a-frame 组件中使用 tick 函数来制作动画。我通过设置一个真/假标志然后递增一个更新顶点的数字来做到这一点。我在下面创建了一个简化版本来说明该过程。我想了解如何更好地使用 tick 函数。

具体来说，我的问题分为两部分。

1. 一旦其中的函数“完成”(在本例中为 curr === to)，我如何停止运行 tick 函数？

2. 如何重置我为首先触发它而设置的标志，以便稍后重新触发它？

你会在下面看到我有一个不完整的解决方案来阻止它(我检查我递增的当前值没有超过 to 值 && this.curr < 9 )但这只是为了阻止它在屏幕/控制台上无休止地运行.

我曾尝试在函数末尾将“更改”属性设置回 false，但它似乎一遍又一遍地执行此操作，并且似乎不断更改属性会影响性能？也许我错了。请在下面查看我的代码。

组件；

AFRAME.registerComponent('tickquery', {

    schema: {    
        change: {type: 'boolean', default: false},
    },

    init: function () { 
        this.curr = 0
        this.to = 10
        this.dur = 400
        this.parent = this.el
    },

    update: function () {

    },

    tick: function (t, td) {
        if ( this.data.change === true && this.curr < 9 ){
            if ( this.curr < this.to ) {
                var step = this.stepCalc(this.curr, this.to, this.dur, td)
                this.curr += step
                this.parent.setAttribute('value', this.curr)
                //console.log(this.curr)
            }        
        }
    },

    stepCalc: function (curr, to, dur, td) {
        var distance = Math.abs(curr - to)
        var speed = distance/dur
        var step = speed*td
        return step;
    },

});

HTML；

<a-scene test>
    <a-text 
        id="ticker" 
        tickquery 
        value="0"
        color="#333"
        position="0 0 -5">
    </a-text>
</a-scene>

以及触发更改的组件；

AFRAME.registerComponent('test', {
  init: function () {
    setTimeout(function(){
          var ticker = document.getElementById('ticker');
          ticker.setAttribute('tickquery', {'change': true});
    }, 2000);           
  },      
});

和here is a fiddle (等待 2 秒，看到带有勾号的文本更新)

我可能以错误的方式处理这个问题，所以请告知是否有更好的方法来处理这个问题。需要更多信息，请告诉我。谢谢。

Answer 1

如果你想使用一个标志，那么你必须稍微改变你的代码:

init: function() {
   this.animationRunning = true;
},
tick: function (t, td) {
  if(animationRunning) {
    if ( this.curr < 9 ) {
        if ( this.curr < this.to ) {
            var step = this.stepCalc(this.curr, this.to, this.dur, td)
            this.curr += step
            this.parent.setAttribute('value', this.curr)
            //console.log(this.curr)
        }        
    } else {
      this.animationRunning = false;
    }
  }
}

所以我有一个标志，它会一直存在，直到满足条件，然后它才会变为 false。

---

现在，重置标志。这真的取决于您要检查重置条件的位置。如果您想检查组件中的某些内容，您还可以在 tick() 中进行检查，如果满足某些条件，它将重置标志。

如果你想从组件外部做，你可以添加另一个功能到你的组件

restart: function() {
   this.curr = 0;
   this.animationRunning = true;
}

并调用它:yourElementReference.components.tickquery.restart()。 看看in this fiddle .

---

我不确定是否使用更新 + 架构机制。您可以重置 update 函数中的值，并将 change 属性设置为它的相反值以调用 update 就像我做的一样 here .

不过就是这么简单的操作，应该不会影响这里的性能