如果我添加 alert()，为什么我的 JavaScript 函数执行不确定？

Question

我编写了下面的函数来获取 ID 为 courselessons 的 listbox 的长度。问题是，当我评论 alert() 时，函数 changecheckbox 只工作一次。

如果我删除 alert 它工作正常。但我不想在每次点击时都收到警报。

selOpts第一次显示正确的内容。

JavaScript:

function changecheckbox() {
   //alert("function called...");
   var selOpts = document.getElementById("courselessons").length();
   alert(selOpts);
   if (selOpts > 0) {
       $('#taskassignment').prop('disabled', false);
   }
   else {
       $('#taskassignment').prop('disabled', true).prop("checked", false);
   }
}

function addItem() {
   if (seltask == undefined || seltask.length === 0) {
       return;
   }
   var lessonsDropdown = $('#courselessons');
   lessonsDropdown.empty();
   $("#tasks option:selected").appendTo("#coursetasks");
   $("#coursetasks option").attr("selected", false);
   if (seltask.length > 0) {
       cacheToken = new Date().getTime();
       // retrieve data using a Url.Action() to construct url
       $.getJSON('@Url.Action("AddTaskToCourse")', {
           task: seltask,
           lesson: lesson,
           _: cacheToken
       });
       $.getJSON('@Url.Action("UpdateLessonInCourse")', {
           _: cacheToken
       }).done(function (data) {
           //re-enable tasks drop down
           //for each returned tasks
           $.each(data, function (i, lessons) {
               //Create new option
               var test = $('<option />').html(lessons);
               //append tasks taskss drop down
               lessonsDropdown.append(test);
           });
           seltask = null;
       });
    }
    changecheckbox();
}

HTML:

<button type="button" id="btnAdd" onclick="addItem(); changecheckbox();">Add Item</button>

Answer 1

试试这样使用，

function changecheckbox() {
    //alert("function called...");
    var selOpts = $("courselessons").find('option').length;

    if (selOpts > 0) {
        $('#taskassignment').prop('disabled', false);
    }
    else {
        $('#taskassignment').prop({'disabled':true, 'checked':false});
    }
}

或者你可以这样做，

$("#btnAdd").click(function(e){
  e.preventDefault();

 var selOpts = $("#courselessons").find('option').length;

    if (selOpts > 0) {
        $('#taskassignment').prop('disabled', false);
    }
    else {
        $('#taskassignment').prop({'disabled':true, 'checked':false});
    }

});

Answer 2

去掉选项，取select的id <select id="mySelect"> 例子：

var selOpts = document.getElementById("mySelect").length;

您的代码将是

function changecheckbox() {
        //alert("function called...");
        var selOpts = document.getElementById("courselessons").length;
        if (selOpts > 0) {
            $('#taskassignment').prop('disabled', false);
        }
        else {
            $('#taskassignment').prop('disabled', true);
            $("#taskassignment").prop("checked", false);
        }
    }

Answer 3

addItem() 中的代码正在向资源 asynchronously 发出 GET 请求。这意味着执行此函数之后的代码将不会等待其执行完成。

When I uncomment the alert it works fine.

这是因为 alert() 是内置的，它会暂停脚本的执行，直到用户交互。这给了 addItem() 需要的时间，而且一切似乎都正常。

幸运的是，有一些解决方案可以处理这种情况。

Promise.
重新安排您的代码以使用回调。

在幕后，$.getJSON 是 shorthand 用于使用 ajax 和 datatype = 'json' 发出 GET 请求，它 returns 是一个承诺基本上告诉你请稍候亲爱的对象，我会给你一些可能成功或失败但稍后的时间。

所以是的，您可以轻松调用 done().

中的函数

注意：这些东西在网上已经解释得很好，所以我不会重新发明轮子:)

保持简单...

function addItem() {

    // Rest of the code...

    if (seltask.length > 0) {
        cacheToken = new Date().getTime();
        // retrieve data using a Url.Action() to construct url
        $.getJSON('@Url.Action("AddTaskToCourse")', {
            task: seltask,
            lesson: lesson,
            _: cacheToken
        });
        $.getJSON('@Url.Action("UpdateLessonInCourse")', {
            _: cacheToken
        }).done(function (data) {
            //re-enable tasks drop down
            //for each returned tasks
            $.each(data, function (i, lessons) {
                //Create new option
                var test = $('<option />').html(lessons);
                //append tasks taskss drop down
                lessonsDropdown.append(test);
            });
            seltask = null;
            changecheckbox();
        });

    }        
}

完成此设置后，您应该从按钮 onclick 中删除 changecheckbox() 调用，否则它会执行两次。

如果我添加 alert()，为什么我的 JavaScript 函数执行不确定？

Why my JavaScript function is executing uncertainly if i add an alert()?

javascript

jquery

list

getjson

JavaScript:

HTML: