Executar código após concluído o anterior

Olá,

Estou com o seguinte código:

var add = '';
var total = 0;

var execute1 = function(){
	num = res.rows.length;
	for(i=0; i < num; i++){
 var item_id = res.rows.item(i).id;
 add += '<tr>';
 add += '<td><a href="javascript:delItem('+item_id+');"><img src="img/excluir.png"></a></td>';
 add += '<td>'+res.rows.item(i).quantidade+'</td>';
 add += '<td>'+res.rows.item(i).produto_nome+'</td>';
 add += '<td>R$ '+sistemadegestao.functions.converteMoeda(res.rows.item(i).preco_unitario)+'</td>';
 add += '</tr>';
 total = (total + res.rows.item(i).total);
 if(res.rows.item(i).sabores != ''){
 var sabores = JSON.parse(res.rows.item(i).sabores);
 var numSabores = sabores.length;
 var s = 0;
 $.each(sabores,function(key,value){
 sistemadegestao.produtos.getSaborByCode(key,function(sab){
 console.log(sab);
 if(sab.rows.length > 0){
 add += '<tr>';
 add += '<td><a href="javascript:delSabor('+item_id+','+key+');"><img src="img/excluir.png"></a></td>';
 add += '<td style="font-size:8px;">'+value+'</td>';
 add += '<td style="font-size:8px;">'+sab.rows.item(0).descricao+'</td>';
 add += '<td></td>';
 add += '</tr>';
 }
 },function(){});
 });
 }
	};
};

$.when(execute1).done(function(){
	console.log('EXECUTOU');
	console.log(add);
	$('.total').html('R$ '+sistemadegestao.functions.converteMoeda(total));
	$('#list_produtos').html(add);
	var edit = {};
	edit.valor_produtos = total;
	edit.valor_total = total;
	edit.data_alteracao = sistemadegestao.functions.date();
	sistemadegestao.pedidos.edit(sistemadegestao.pedidos.id_pedido,edit,function(){},function(){});
});

O código esta sendo usado para listar produtos porem um precisaria que somente fosse executado o código dentro do $.when após toda a função acima ser concluida porém isto não esta acontecendo e a variavel add dentro do $.when sempre está vazia, como posso fazer para que a função seja executada antes e só depois executado o código dentro do $.when ??