Twitter bootstrap 3 启动下拉菜单在单击后打开，直到长时间运行的功能完成

我有一个Bootstrap下拉菜单，功能很好，但是当从列表中选择一个项目时，调用一个函数需要长达30秒的时间。下拉列表保持打开状态，直到函数完成且OnClick事件退出

<div class="container">
<div class="form-group">
<div class="col-xs-10">
  <div id="ddColor" class="dropdown">
    <h3 class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                <span id="ddColorChoice">Select Color</span>
                                <span class="caret"></span>
                            </h3>
    <ul class="dropdown-menu">
      <li><a href="#">Red</a></li>
      <li><a href="#">Green</a></li>
      <li><a href="#">Yellow</a></li>
      <li><a href="#">Blue</a></li>
    </ul>
  </div>
</div>

有没有办法在单击时关闭下拉列表，然后处理该功能

这里有一个

---

谢谢

我会使用承诺和延期来处理长期运行的流程。这样，长时间运行的进程将异步运行，并且不会阻止浏览器响应

具体地说，我将创建一个延迟容器，作为长时间运行的流程的容器

var def = $.Deferred();

$(document).on("click", "li a ", function() {
    value = $(this).text();
    el.text(value);
    def.resolve();
});

在延迟的事件中，我将调用长时间运行的进程。在本例中，我还做了一些其他操作：

def.done(function() {
    var t = p.html() + "<br/>def resolved, calling long running process";
    p.html(t);
    console.log("def done");
    LongRunningProcess(3000);
});

我用一个简单的setTimeout函数代替了一个例子

function LongRunningProcess(ms) {
    var deferred = $.Deferred();
    setTimeout(function() {
        var t = p.html() + "<br/>long running process done";
        p.html(t);
        console.log("long running process done");
        deferred.resolve;
    }, ms);
    return deferred.promise();
}

---

.

您是在使用jQuery还是其他JavaScript库/框架？我忍不住要说，非常感谢您的精彩回答！

function LongRunningProcess(ms) {
    var deferred = $.Deferred();
    setTimeout(function() {
        var t = p.html() + "<br/>long running process done";
        p.html(t);
        console.log("long running process done");
        deferred.resolve;
    }, ms);
    return deferred.promise();
}