angular2 javascript keyup同步方法调用最后一次按键调用

时间:2017-01-25 14:37:54

标签: javascript performance angular

angular2 follow是我拥有的代码的例子

我在表单上的每个键击上都附加了onFormChange()方法,该表单正在过滤对象,以确保每行都有有效的表单。

setTimeout(()=> this.findChange(), 1000 );每秒都会开火。

  1. 防止多次执行findChange()方法,并仅在用户按键暂停时执行。
  2.     private onFormChange(isValid: boolean, myObject){
    
           myObject.valid= isValid;
           setTimeout(()=> this.findChange(), 1000 );
    
            }
       private findChange(){
        global_var_change_found = this.objects.filter(
          myObject=> myObject.valid && myObject.ready ).length > 0
    }
    

1 个答案:

答案 0 :(得分:2)

只需添加changeTimeout引用并在设置新引用前将其清除:

 private onFormChange(isValid: boolean, myObject){

       myObject.valid= isValid;

       clearTimeout(this.changeTimeout);

       this.changeTimeout = setTimeout(()=> this.findChange(), 1000 );

        }
   private findChange(){
    global_var_change_found = this.objects.filter(myObject=> myObject.valid && myObject.ready ).length > 0
}

请注意,这是您的解决方案的quickfix。我建议使用Observables。处理这类问题会更​​舒服。

这是一个简单的例子:

var input = document.getElementById('myInput');

Rx.Observable.fromEvent(input, 'keyup')
  .map(() => input.value)
.debounceTime(1000)
  .subscribe(
    results => {
      
      //Do Whatever You want here.
      
      console.log("Do whatever you want here");
      
    },
    error => { console.log(error); }
  );
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.js"></script>

<input type="text" id="myInput">