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

Question

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

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

一旦我的函数是'completed'（在这种情况下，curr === to），我如何停止滴答函数运行？
如何重置我设置的标志以便首先触发它，以便我可以稍后重新触发它？

你会在下面看到我有一个不完整的解决方案来阻止它（我检查我正在增加的当前值没有超过到值 && this.curr < 9 ）但这只是为了阻止它从运行没完没了 screen/console.

我曾尝试在函数末尾将 'change' 属性设置回 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;
    }
  }
}

所以我有一个标志，它会一直存在，直到满足条件，然后它就会变成假。

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

如果您想从组件外部执行此操作，您可以向您的组件添加另一个函数

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

并称它为：yourElementReference.components.tickquery.restart()。检查一下 in this fiddle。

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

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

Answer 2

您可以将更改检测移至 update 函数。这仅在属性更改时调用，因此它将被调用一次：

update: function (oldData) {
  if (this.data.change) {
    // ...
    this.parent.setAttribute('value', this.curr) 
  }
}

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

How to stop tick function executing code in a-frame once condition is met?

javascript

webvr

aframe