javascript - JQuery で最初のリクエストが次のリクエストをブロックする

Question

私はWebアプリケーションを構築しています。タブ 1 にボタンがあります。このボタンをクリックすると、バックエンドでいくつかのロジック処理が行われます。次に、タブ 2 に移動します。このタブでは、処理の更新を確認できます。

しかし問題は、ボタンをクリックした後、関連する関数 (ajax() 関数) が呼び出されたことです。しかし、タブ 2 を呼び出すと、関数は tabselect イベントによってトリガーされないか、イベントがトリガーされません。テストのために、タブ 2 の tabselect イベントの開始時にアラート機能を追加しました。

フロントエンドで jQuery を使用し、バックエンドで Flask を使用しました

以下はボタンクリックイベントです

    <i>
         /** Start test button request **/
            $('#btn_start_test').click(function() {
                $('#btn_start_test').attr('disabled', 'disabled');
                $('#btn_stop_test').removeAttr('disabled');
                setTestStatus('running');
                var indexes = '';
                var test_option = $('input[@name=test_option]:checked').val();
                if (test_option == 1) { // Test checked testsuites
                    $.each($('input[name="testsuites_group"]:checked'), function(index, value) {
                        indexes += '&index' + index + '=' + $(this).attr('id');
                    });
                }
                var startTest = $.ajax({
                                                    type: 'POST',
                                                    url: '/start_test',
                                                    data: indexes
                                             });
                //startTest.complete(function() {
                //  $('#btn_start_test').removeAttr('disabled');
                //  $('#btn_stop_test').attr('disabled', 'disabled');
                //  setTestStatus('idle');
                //});
            });
    </i>

以下は、別のタブ選択イベントです。

            $("#tabs").bind('tabsselect', function(event, ui) {
                if (ui.index == 0) {
                    loadPage();
                }else if (ui.index == 1) {
                    loadStatusTab();
                }
            });