处理输入事件，通过一个

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()); 
     }); 
    });