Question

以下javascript代码按以下顺序执行：
1.显示标签，
2.显示警报，
3.显示模态;

但代码中的命令序列不同（参见代码）。

在调试模式下，执行按正常顺序执行。

这里发生了什么？

如何在运行时获得正常的订单？

<html>
<head>
    <title></title>
    <script src="scripts/jquery-2.0.3.js"></script>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>

    <input type="file" onchange="openFile(event)"/>

    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">header</div>
                <div class="modal-body">body</div>
                <div class="modal-footer">footer</div>
            </div>
        </div>
    </div>

    <label id="label" style="display:none;">this is label</label>

    <script>
        openFile = function (event) {
            $('#label')[0].style.display = 'block';
            $('#myModal').modal('show');
            alert('alert');
        }
    </script>

</body>
</html>

Answer 1

如果你想以明确的顺序发生某些事情，请尝试使用deferred objects，因为jQuery通常会在异步时启动事件。使用延迟对象，您可以等待函数完成，然后定义一个回调函数，该函数将在执行完所述函数后启动。

Answer 2

Bootstrap .modal()机制（与大多数Bootstrap架构一样）通过事件驱动布局更改。为了显示模态对话框，代码生成一个新的Event对象并触发它。这是由浏览器异步处理的，因为事件处理程序是在一个单独的（后续）事件循环中调用的。

这是当前github主分支中模态“show”代码的第一位：

  Modal.prototype.show = function (_relatedTarget) {
    var that = this
    var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })

    this.$element.trigger(e)

“show.bs.modal”事件的处理程序只会向所涉及的<div>添加一个类。

Answer 3

使用模型回调在模型加载后运行。

openFile = function (event) {
            $('#label')[0].style.display = 'block';
            $('#myModal').modal('show');
            $('#myModal').on('shown', function() {
                 alert('alert');
            })
        }

如果Bootstrap 3

    openFile = function (event) {
            $('#label')[0].style.display = 'block';
            $('#myModal').modal('show');
            $('#myModal').on('show.bs.modal', function() {
                 alert('alert');
            })

        }

bootstrap＆amp; javascript：命令序列

3 个答案: