使用超时时无法隐藏/禁用元素

Question

我正在尝试禁用按钮，隐藏选择列表并在单击按钮后显示一些文本...因为 javascript 需要多长时间我正在使用超时来防止浏览器锁定和浏览器结束它过早地或显示警告...但是一旦单击按钮，我的代码似乎并没有隐藏/禁用/显示元素。

编辑：我已经确认元素被隐藏然后重新显示，但是它们被重新显示得太早了.... javascript 还没有完成它正在做的事情并且它们被重新显示几乎在它们被隐藏后立即。

编辑 2： 通过将重新显示选择列表等的代码从“addCatsSICMain”函数移动到“addCatsSIC”函数来修复它..

if (spot < cats.options.length) {    
    other code here...
} else {
    reshow select list etc code here
}

代码如下：

第一个函数是单击按钮后调用的函数。

function addCatsSICMain() {

    // Set elements
    var addBtn = document.getElementById('add');
    var cat_sel = document.getElementById('cat_sic_sel_wrapper');
    var addWait = document.getElementById('addWait');

    // Disable add button
    addBtn.disabled = true;

    // Hide selected list
    cat_sel.style.display = 'none';

    // Show waiting text
    addWait.style.display = 'block';

    // Use a timeout function so button can be hid/show when we want successfully & not on function completion

    setTimeout(function(){

        // Add selected cats
        addCatsSIC(0);

        // Reshow selected list, reenable add button & hide wwaiting text
        addWait.style.display = 'none';
        cat_sel.style.display = 'block';
        addBtn.disabled = false;

    }, 10);

}

function addCatsSIC(spot) {

    // Set the search results box
    var cats = document.getElementById('cat_sic_list');

    // Set the selected categories list that we are adding to..
    var sel_cats = document.getElementById('cat_sic_sel'); 

    // Set selcted counter var
    var sel_count = 0;

    // Set category add failed var
    var failed = 0;

    // Set batch size for looping
    var batchSize = 50;    

    // Still more to do?

    if (spot < cats.options.length) {    

        // Loop through categories from the search results select box

        for (var i = spot; i < spot + batchSize && i < cats.options.length; i++) {

            // Check if the cat is selected

            if (cats.options[i].selected == true) {

                // Set this category's values to some variables
                var cat_id = cats.options[i].getAttribute('value');
                var cat_name = cats.options[i].text;     

                if (checkCatSICAdd(cat_id) === false) {           

                    // Now we create the new element
                    var new_option = document.createElement('option');

                    // Add attribute
                    new_option.setAttribute('value',cat_id);

                    // Create text node
                    var new_text_node = document.createTextNode(cat_name);

                    // Append new text node to new option element we created
                    new_option.appendChild(new_text_node);

                    // Append new option tag to select list
                    sel_cats.appendChild(new_option);

                } else {
                    failed++;
                }

            }

        }

        var nextBitOfWork = function() { addCatsSIC(spot + batchSize) };

        // Hand control back to the browser so it can update the page & not timeout & then restart the function
        setTimeout(nextBitOfWork, 50);

    }

    if (failed > 0) {

        // Find out if more than 2 cats were selected

        for (var i = 0; i < cats.options.length; i++) {
            if (cats.options[i].selected == true) {
                sel_count++;   
            }
            if (sel_count == 2) {
                break;
            }
        }        

        // Give them an alert they have added that category already
        /*addedCatSICAlert(sel_count);*/

    }

}

Answer 1

您不为此使用 jQuery 的任何原因。您可以通过执行以下操作来禁用按钮、隐藏选择框和显示元素

$('button').click(function() {
    $(this).attr('disabled', 'disabled');
    $('select').hide();
    $('p').show();
})

在http://jsfiddle.net/N697c/1/查看工作示例

Answer 2

通过将重新显示选择列表等的代码从“addCatsSICMain”函数移动到“addCatsSIC”函数来修复它..

if (spot < cats.options.length) {    
    other code here...
} else {
    reshow select list etc code here...
}