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

我在下面编写了函数,以获取带有ID课程的列表框的长度.问题是当我注释alert()时,功能changecheckbox仅工作一次.

如果我删除警报,则可以正常运行.但我不想在每次单击时都发出警报.

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>

解决方法:

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

When I uncomment the alert it works fine.

这是因为内置了alert(),它将暂停脚本的执行,直到用户交互为止.这给了addItem()所需的时间,一切似乎都可以正常工作.

幸运的是,有解决方案可以处理这种情况.

> Promise.
>重新排列代码以使用回调.

在幕后,$.getJSON是使用ajax和datatype =’json’发出GET请求的简写,它返回一个promise对象,该对象基本上告诉您,请亲爱的,我会给您一些成功或失败的信息,但是一段时间之后.

所以是的,您可以轻松地在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()调用,否则将使其执行两次.

标签：getjson,list,javascript,jquery
来源： https://codeday.me/bug/20191027/1940750.html