Как обрабатывать медленный отклик ajax на разделение div несколькими функциями

Question

У меня есть один div.

<div id="test"></div> 

Несколько функций.

fun1() 
{ 
    $('#test').html(''); 
    $.ajax(function(){ 
    url : abc/index; 
    success : function(response){ 
     $('#test').html(response); 
    } 
    }); 
} 
fun2() 
{ 
    $('#test').html(''); 
    $.ajax(function(){ 
    url : abc/getDetail; 
    success : function(response){ 
     $('#test').html(response); 
    } 
    }); 
} 
fun3() 
{ 
$('#test').html(''); 
    $.ajax(function(){ 
    url : abc/getUser; 
    success : function(response){ 
     $('#test').html(response); 
    } 
    }); 
} 

Функция получить звонок на другой щелчок на кнопке.

btn1.click(fun1()) 
btn2.click(fun2()) 
btn3.click(fun3()) 

Когда btn1, btn2, btn3 пресса сразу один за другим, я могу видеть Div «тест» содержат в качестве первого ответа «FUN1» через некоторое время «fun2» ответа и так далее.

Я знаю причину, так как мой ответ аякса очень медленный, поэтому это происходит.

Когда кто-то нажимает на btn1 и перед тем как получить ответ fun1, нажмите btn2. В этом случае я просто хочу загрузить fun2-ответ. Если fun2 делает задержку, хотите показать пустую страницу.

Я думал об убийстве оставшегося запроса ajax, при нажатии кнопки. Но в то же время мой другой запрос ajax также идет, я не хочу их убивать. Так что убийство другого запроса ajax не будет работать для меня. Каким будет другое решение.

Answer 1

ОК у вас есть две проблемы

1: вы обстреливают несколько запросов, когда вы действительно хотите только последний один, чтобы идти обрабатывать

2: каждое событие обновляет экран независимо от того, что еще произошло

Я предлагаю вам атаковать эти две проблемы отдельно.

Сначала добавьте функцию обратного вызова для вашего ответа. это позволит вам проверить условия (например, «что-нибудь еще случилось?») перед обновлением страницы. Это дает вам шанс отбросить первые ответы.

Во-вторых, вам необходимо иметь дело с отправкой нескольких запросов в первую очередь. Вы можете либо отменить их, когда нажата вторая кнопка (но они все равно будут обрабатываться на сервере) ИЛИ: вы можете добавить таймер и не сразу отправить запрос.

Запустите таймер, когда вы нажмете кнопку, а затем скажите 200 мс? позже, запустите запрос и обработайте ответ.

Если вы получили еще один клик до истечения 200 мс, запустите первый таймер и запустите новый.

В качестве альтернативы вы можете запретить пользователю щелчок по кнопкам после отправки запроса, дезактивируя их и только после того, как ответ получен.

например: (немного сырой с глобальными переменными, я знаю)

var btnLastPressed =0 
    fun1() 
    { 
     btnLastPressed = 1; 
     $('#test').html(''); 
     $.ajax(function(){ 
     url : abc/index; 
     success : function(response) { finished(1,response);} 
     }); 
    } 

    function finished(btn, response){ 
     if(btnLastPressed==1){ 
      $('#test').html(response); 
     } 
    }