Question

我在输入keyup动作上设置一个布尔值。我有一种逻辑，可以根据我要设置的布尔值来检查我的输入值。在其他情况下，我想让我的布尔值为true，然后一秒钟后为false。我希望它只是一秒钟就正确。我在HTML中使用此布尔值添加了一个类（要设置背景，它应在1秒钟后消失）。但是我下面的逻辑不起作用。请帮助我。

    <input
        type="text"
        data-ng-class="{'inputBgChange': controller.firstAmountUpdated}"
        ng-keyup="controller.myFunction()"
    >

    <style>
        .inputBgChange {background-color: red;}
    </style>

    <script>
        myFunction() {
            const diffBeforeUpdate = this.secondAmount - this.firstAmount;
            const diffAfterUpdate = this.secondAmount - this.prevfirstAmount;
            if((diffBeforeUpdate >= 50 && diffAfterUpdate >= 50) || this.secondAmount === '')  {
                this.firstAmount = this.prevfirstAmount;
                this.firstAmountUpdated = false;
            } else {
                this.firstAmount = parseInt(this.secondAmount) - 50;
                this.firstAmount >= 0 ? this.firstAmountUpdated = true : this.firstAmountUpdated = false;
                setTimeout(() => this.firstAmountUpdated = false
            , 1000);
        }
    }

firstAmountUpdated是我要在setTimeout中更新的布尔值。

Answer 1

我认为Jaxi是正确的。

您可以通过在超时后运行函数时检查this上下文来对其进行测试：

setTimeout(
 () => {
    console.log(this);
    this.firstAmountUpdated = false;
 }
, 1000);

如果您获得undefined，则可以预先绑定该函数：

    const timeoutFunc = () => this.firstAmountUpdated = false;
    setTimeout(timeoutFunc.bind(this), 1000);

Answer 2

使用AngularJS $ timeout服务代替使用setTimeout：

myFunction() {
    const diffBeforeUpdate = this.secondAmount - this.firstAmount;
    const diffAfterUpdate = this.secondAmount - this.prevfirstAmount;
    if((diffBeforeUpdate >= 50 && diffAfterUpdate >= 50) || this.secondAmount === '')  {
        this.firstAmount = this.prevfirstAmount;
        this.firstAmountUpdated = false;
    } else {
        this.firstAmount = parseInt(this.secondAmount) - 50;
        this.firstAmount >= 0 ? this.firstAmountUpdated = true : this.firstAmountUpdated = false;
        ̶s̶e̶t̶T̶i̶m̶e̶o̶u̶t̶(̶(̶)̶ ̶=̶>̶ ̶t̶h̶i̶s̶.̶f̶i̶r̶s̶t̶A̶m̶o̶u̶n̶t̶U̶p̶d̶a̶t̶e̶d̶ ̶=̶ ̶f̶a̶l̶s̶e̶
        this.$timeout(() => this.firstAmountUpdated = false
        , 1000);    
    }
}

AngularJS通过提供自己的事件处理循环来修改常规JavaScript流。这将JavaScript分为经典和AngularJS执行上下文。只有在AngularJS执行上下文中应用的操作才能受益于AngularJS数据绑定，异常处理，属性监视等。

$ timeout服务将setTimeout方法与AngularJS框架及其摘要周期集成在一起。

有关更多信息，请参见

AngularJS $timeout Service API Reference

在if语句中添加settimeout以更新布尔值

2 个答案: