處理輸入事件，通過一個

Question

我有下面的代碼排隊起來，並調用異步功能之一。然後，我需要如何確保addMessage不是並行調用？

Answer 1

可以按下Promise或函數返回到Promise陣列。如果當前Promise或返回Promise沒有定義函數，調用在陣列隊列第一功能，鏈.then()調度來電時當前異步操作完成相同的功能，其中，在隊列的下一個項目是在陣列的下一個項目，否則呼叫功能時隊列陣列.length是0。

window.onload =() => { 
 

 
    const [queue, input, div] = [ 
 
    Array() 
 
    , document.querySelector("input") 
 
    , document.querySelector("div") 
 
    ]; 
 
    
 
    let curr; 
 

 
    const complete = message => { 
 
    curr = void 0; 
 
    console.log(`message: ${message}, queue.length: ${queue.length}`); 
 
    }; 
 

 
    const processData = data => div.innerHTML += data; 
 

 
    const checkQueue = (message = "done") => 
 
    curr() // `curr()` if pass function to `queue`, `curr` if pass `Promise` 
 
    .then(processData) 
 
    .then(() => (curr = queue.shift()) ? checkQueue(message) : message) 
 

 
    const handleMessage = value => { 
 
    queue.push(
 
     // push function to call that returns `Promise` 
 
     // or push `Promise`, remove `() =>`, 
 
     // include `()` after `curr` at `checkQueue` 
 
    () => new Promise(resolve => 
 
       setTimeout(() => { 
 
       resolve(value); 
 
       }, Math.floor(Math.random() * 1500)) 
 
      ) 
 
    ); 
 
    if (!curr) { 
 
     curr = queue.shift(); 
 
     checkQueue("complete") 
 
     // do stuff when `queue` `.length` is `0` 
 
     .then(complete); 
 
    } 
 
    } 
 

 
    input.oninput =() => { 
 
    console.log(input.value.slice(-1)); 
 
    handleMessage(input.value.slice(-1)); 
 
    } 
 

 
}

<input type="text" /> 
 
<div></div>

凡this.addMessage()回報Promise或返回Promise

database.ref('chats/').on('child_added',(snapshot) => { 
    handleMessage(this.addMessage(snapshot.val())); 
}); 

Answer 2

我發現了一個簡單的解決方案感謝您輸入的功能：

var queue = Promise.resolve(); 
    database.ref('chats/' + this.props.alarm.date).on('child_added', 
    (snapshot) => { 
     queue = queue.then(()=> { 
     this.addMessage(snapshot.val()); 
     }); 
    });