Обработка ввода ключевого события в ember

Question

У меня есть компонент в моем приложении. У него есть форма с текстовыми полями. У него будет кнопка отправки. При отправке будет отправлен запрос на отправку на сервер. Я также обработал событие клавиатуры в компонентах js-файла. При нажатии кнопки он отправит запрос на отправку на сервер. Когда ключ ввода нажат два раза непрерывно, он делает два запроса на отправку на сервер с успехом первого запроса и неудачным вторым запросом. Я хочу сделать свое приложение таким, даже если пользователь нажимает клавишу ввода два раза непрерывно, он должен отправить только один запрос на сервер. Может кто-нибудь помочь мне решить эту проблему. Спасибо заранее.

Компоненты JS файл:

export default Component.extend({ 
keyDown:function(event){ 

     let self = this; 
     if(event.keyCode === 13){ 
       self.send('submitform'); 
       return false; 
      } 

    actions: { 
     submitform(){ 
     //logic to handle the post request to the server  
    } 
} 

Answer 1

Try usig Ember.run.debounce,

export default Ember.Component.extend({ 
    keyDown: function(event) { 
     let self = this; 
     if (event.keyCode === 13) { 
      // self.send('submitform'); 
      Ember.run.debounce(self,self.get('submitform'),400); 
      return false; 
     } 
    }, 
    submitform(){ 
     //handle submit form logic 
    } 
}); 

Вы можете играть с twiddle here

Answer 2

Вы хотите, чтобы отключить submitForm(), пока ваш запрос POST завершена. Вы можете сделать это, установив свойство submitting на компонент и включив его перед отправкой POST и выключив его после устранения обещания. Может быть, попробовать что-то вроде:

export default Ember.Component.extend({ 
    submitting: false, 
    keyDown: function(event) { 
    if (event.keyCode === 13) { 
     this.submitform(); 
    } 
    }, 
    submitform() { 
    // Run only if not currently submitting 
    if (!this.get('submitting')) { 
     // What to do when submit succeeds 
     const success =() => { 
     this.set('submitting', false); 
     } 
     // What to do when submit fails 
     const fail =() => { 
     this.set('submitting', false); 
     } 
     // Do the POST request 
     this.set('submitting', true); 
     this.get('someModel').save().then(success).catch(fail); 
    }; 
    } 
}); 

И, связаны между собой, это позволяет делать забавные вещи с вашего шаблона, такие как отключение и стилизации кнопку отправки для тех пор, пока POST обещание еще не решен:

<button {{action 'submitForm'}} disabled={{submitting}} class="{{if submitting 'loading'}}"> 
    {{#if submitting}} 
    Submitting ... 
    {{else}} 
    Submit 
    {{/if}} 
</button> 

О, и, наконец, не нужно использовать let self = this;. Вместо этого используйте функции стрелок ES6 () => { ... }, чтобы вы могли продолжать использовать this внутри.