tengo esta función que realiza dos peticiones ajax en la cual en la primera saca el turno del trabajador la fecha y el tipo, y en el segundo ajax devuelve el horario segun la linea y el turno, la cosa es que me pinta solo el contenido <tr><th>Fecha</th><th>Linea</th><th>Turno</th><th>Hora Inicio</th></tr>
que se ejecuta antes del segundo ajax, la pregunta es como puedo hacer para que lo pinte bien, osea que espere se espere para pintar a que se ejecute el segundo ajax
$('#turnos').on('click', function(e) { // add event submit
$('#tbodyturnos').empty()
var cod = $('#trabajador').val();
$.ajax({
url: 'ajax/turnos.php',
type: 'POST',
dataType: 'JSON',
data: {}
}).done(function (response) {
if (response==null) {
var nuevoturno = "<h3>No Tiene turnos disponibles el fin de semana</h3><br><h5>*Contacte con Oficina para mas informacion</h5>"
}
else{
var nuevoturno = "<tr><th>Fecha</th><th>Linea</th><th>Turno</th><th>Hora Inicio</th></tr>"
for (i = 0; i < response.length; i++) { //cuenta la cantidad de registros
turno=response[i].Turno
fecha=response[i].Fecha
tipo=response[i].Tipo
$.ajax({
url: 'ajax/horario.php',
type: 'POST',
dataType: 'JSON',
data: {
turno:turno,
tipo:tipo,
fecha:fecha
}
}).done(function (response1) {
nuevoturno += "<tr><td>" +
fecha + "</td><td>" +
tipo + "</td><td>" +
turno + "</td><td>" +
response1 + "</td></tr>"
})
}
nuevoturno += "<tr><td colspan='4'><h5>* Turno pendiente de confirmacion por parte de la direccion de la empresa</h5></td></tr>"
}
$('#tbodyturnos').append(nuevoturno)
$('#turnosModal').modal('toggle');
})
});