有没有一种方法可以编写JavaScript，使其在处理许多回调时更具可读性

我使用JavaScript。由于代码的外观，我变得越来越沮丧。代码是如此嵌套，以至于我很快就需要投资第三台37英寸的显示器，以防止一直损坏我的手指

以下是我现在正在处理的一些工作代码：

$(function () {
    var mainContainer = $('#mainContainer'),
        countyContainer = $('#countyContainer'),
        workAreaContainer = $('#workAreaContainer');
    $('body').fadeIn(400, function() {
        mainContainer.slideDown(400, function() {
            ShowLoader();
            ListCounties(function(counties,success) {
                if (success) {
                    HideLoader();
                    for (var i = 0; i < counties.length; i++) {
                        if (counties[i] != "") {
                            countyContainer.append(
                                '<div class="col-md-3 county-result-item">'+
                                    '<h3>'+counties[i]+'</h3>'+
                                    '<i class=" '+FA('fa-folder-open','3x')+' text-center" style="color:'+RandomColor()+'"/>'+
                                '</div>'
                            );
                        }
                    }
                    var countyResultItem = $('.county-result-item');
                    countyResultItem.on('click', function(event) {
                        event.preventDefault();
                        var county = $(this).text().split("(")[0];
                        if (county != "") {
                            ShowLoader();
                            countyContainer.slideUp(400);
                            FetchWorkAreas(county,function(workAreaData,success) {
                                if (success) {
                                    for (var i = 0; i < workAreaData.workAreas.length; i++) {
                                        workAreaContainer.append(
                                            '<div class="col-md-3 workArea-result-item">'+
                                                '<h3>'+workAreaData.workAreas[i]+'</h3>'+
                                                '<i class=" '+FA('fa-folder-open','3x')+' text-center" style="color:'+RandomColor()+'"/>'+
                                            '</div>'
                                        );
                                    }
                                    HideLoader();
                                    workAreaContainer.slideDown(400, function() {
                                        var workAreaResultItem = $('.workArea-result-item');
                                        workAreaResultItem.on('click', function(event) {
                                            event.preventDefault();
                                            var selectedWorkArea = $(this).text().split("(")[0];
                                            FetchJobListings(workAreaData.countyID,selectedWorkArea,function(jobListings,success) {
                                                if (success) {
                                                    console.log(jobListings);
                                                }
                                            });
                                        });
                                    })
                                }
                            });
                        }
                    });
                }
            });
        });
    });
    function FetchJobListings(countyID,selectedWorkArea,callback) {
        $.post('Fetch.php', {fetch: 'jobListings',countyID : countyID, selectedWorkArea: selectedWorkArea}, function(data) {
            if (data) {
                callback(data,true);
            }
        });
    }
    function FetchWorkAreas(county,callback)
    {
        $.post('Fetch.php', {fetch: 'workAreasID',county:county}, function(data) {
            if (data && data.workAreas.length > 0) {
                callback(data,true);
            }
        });
    }
    function ListCounties(callback)
    {
        $.post('Fetch.php', {fetch: 'counties'}, function(data) {
            if (data) {
                if (data.length > 0) {
                    callback(data,true);
                }
            }
        });
    }
    function RandomColor() {
        var colors = ["#cea547","#7e8b58","#002c44","6da6a7"];
        var rand = Math.floor(Math.random()*colors.length);
        return colors[rand];
    }
    function FA(icon,size) {
        var iconSize = '';
        if (typeof size != undefined) {
            iconSize = size;
        }
        return 'fa '+ icon+' fa-'+size;
    }
    function ShowLoader() {
        if ($('.imgLoader').length === 0) {
            var loaders = ["loading1.gif","loading2.gif","loading3.gif","loading4.gif"];
            var rand = Math.floor(Math.random()*loaders.length);
            $('#mainContainer').append('<div class="imgLoader"><img class="imgLoader img-responsive img-center" src="imgs/'+loaders[rand]+'" /><h3 class="text-center">Laster</3></div>');
        }
    }
    function HideLoader() {
        $('.imgLoader').fadeOut(400,function() {
            $(this).remove();
        });
    }
});

这只会伤害我的眼睛，我真的有点难过，因为对我来说，代码可读性和美观性很重要，而不是最终看起来像鱼梯：

                                            }
                                        });
                                    });
                                })
                            }
                        });
                    }
                });
            }
        });
    });
});

当谈到JavaScript时，我仍然是我所说的新手，这可能是我根本没有注意到的。但基本上，有没有一种方法可以保留代码，这样在我完成代码时它就不会缩进1000次？