在一个function内，添加多个事件侦听
最近遇到个问题，需要在JS的一个function内，在不同的代码执行阶段，更新UI。
做了各种尝试，包括web worker技术，由于种种原因，感觉还是事件侦听离实现更近一些。
具体到以下代码，想实现的效果是：
点击“开始”按钮之后，开始执行 mousedown function（），
在function（）一开始，发出一个event_start事件，表示开始，
接着进行2次长时间的计算，从i=0,增加到i=20000,不停地向console输出i的值，
在每次计算结束之后，再发出一个 event_done_X 事件,比如第1次计算完成就发出event_done_1事件
第2次计算完成发出event_done_2事件，
我期待的结果是，每次发出事件，不论是event_start,event_done_1还是event_done_2，
inputbox的值都会立即作出改变，
但实现情况是，只有event_done_2发出的时候，inputbox的值才作出了改变。
如何才能得到正确的结果？
（下面的JS代码引入了jquery,使用了jquery技术）
<html>
<head>
<meta http-equiv='Pragma' content='no-cache'/>
<meta http-equiv='content-type' content='text/html' charset=UTF-8 >
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<label>For循环更新UI测试</label><br>
<input type="text" id="msg" value="" readonly style="width: 300px"><br>
<button type="button" id="for_st" >开始</button>
<script>
$(document).ready(function () {
document.addEventListener("st",function(e){
$("#msg").val("发生了event_start事件");
});
document.addEventListener("d1",function(e){
$("#msg").val("发生了event_done_1事件");
});
document.addEventListener("d2",function(e){
$("#msg").val("发生了event_done_2事件");
})
})
$(document).on("mousedown","#for_st",function () {
var event_start = new Event("st");
document.dispatchEvent(event_start);
for(var i = 0 ; i < 20000 ; i ++){
console.log(i);
}
var event_done_1 = new Event("d1");
document.dispatchEvent(event_done_1);
for(var i = 0 ; i < 20000 ; i ++){
console.log(i);
}
var event_done_1 = new Event("d2");
document.dispatchEvent(event_done_1);
});
</script>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
其实你的代码写法是没错的，我猜因为js是单线程的，你后续代码的执行阻塞了前面两个事件对input的更新，最终导致你只能看到最后一次的结果