javascript - 退出嵌入在另一个函数中的两个javascript函数

Question

我有一些代码如下:

$(document).on('click', '.set_up_btn', function(){
var menu_name=$('.menu_name').val();
var menu_type=$('.menu_type_sel').val();
var rest_id=$('body').data('rest_id');
var error=false;

if(menu_name=="")
{
    $('.error_box13').eq(0).html("<p>Enter Identifier for this Menu</p>");
    $('.error_box13').eq(0).show(300);
    error=true;
}
if(menu_type=="0")
{
    $('.error_box13').eq(1).html("<p>Select Menu Type</p>");
    $('.error_box13').eq(1).show(300);
    error=true;
}
if(error==true)
{
    return;
}
//check menu name is unique
var data="rest_id="+rest_id+"&name="+menu_name;

$.ajax({
    type:"POST",
    url:"includes/check_menu_name.php",
    data:data,
    success:function(html){
        if(html==1)
        {
            //menu name is duplicate
            $('.error_box13').eq(0).html("<p>Menu Name already in use.</p>");
            $('.error_box13').eq(0).show(300);
            error=true;
        }
        else if(html==2)
        {
            //menu name is ok

        }
    return error;
    }
});//end ajax
if(error==true)
{
    e.stopImmediatePropagation();
    return false;
}

var data2="rest_id="+rest_id+"&name="+menu_name+"&menu_type="+menu_type;

$.ajax({
    type:"POST",
    url:"includes/set_menu.php",
    data:data2,
    success:function(html2){
        if(html2==1)
        {
            var app="";
            if(menu_type==1)
            {
                menu_type="Bar Menu";
            }
            if(menu_type==2)
            {
                menu_type="Food Menu";
            }
            app+="<h2 class='menu_header'>"+menu_type+"</h2><hr />";
            app+="<h2 class='menu_title'>"+menu_name+"</h2>";
            $(app).appendTo($('.third').eq(2));
        }
        else
        {
            alert("ERROR: Could not write to database. Please try again.");
        }
    }
});//end ajax

});

如果第一个 ajax 请求返回“1”，我需要做的是退出整个“点击”功能 - 菜单名称已被该用户使用。

目前，如果发生这种情况，javascript 会继续运行到第二个 ajax 请求并将数据写入数据库。

Answer 1

您遇到此问题是因为成功函数在请求返回时“稍后”被调用。它不是瞬时的，所以错误变量还没有被填充。在 success 函数中处理错误，如下所示:

$.ajax({
    type:"POST",
    url:"includes/check_menu_name.php",
    data:data,
    success:function(html){
        if(html==1)
        {
            //menu name is duplicate
            $('.error_box13').eq(0).html("<p>Menu Name already in use.</p>");
            $('.error_box13').eq(0).show(300);
            error=true;


            // we must handle the error here!


            handleError(e, error);
        }
        else if(html==2)
        {
            //menu name is ok



            // continue on as normal
            continueNoError();
        }
    return error;
    }
});//end ajax

// Code run here runs BEFORE $.ajax returns


function handleError(e, error) {
    if(error==true)
    {
        e.stopImmediatePropagation();
        return false;
    }
}

function continueNoError() {
    // Put what to after the first ajax call here
}