Question

我正在尝试禁用按钮，隐藏选择列表＆amp;单击按钮后显示一些文本...因为javascript可以花多长时间我使用超时来阻止浏览器锁定＆amp;浏览器提前结束或提示警告...但是，单击按钮后，我的代码似乎没有隐藏/禁用/显示元素。

编辑：我已确认元素已隐藏＆amp;然后重新表示，但他们太早被重新表达.... javascript还没有完成它正在做的事情＆amp;它们被隐藏后几乎立即被重新显示。

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

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

2 个答案:

检查http://jsfiddle.net/N697c/1/