使用超时时隐藏/禁用元素时遇到问题

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...
}