JQuery Ajax .abort()

Question

1. Пользователь нажимает на поле поиска
2. типов пользователей фамилия
3. Если texbox Lengh более 2-х символов Аякса вебсервис является называется

У меня есть проблема с медленными базами данных с тысячами записей ...

Я могу набрать «mcm» и подождать, и он вернет 40 результатов за 3 секунды. Я могу продолжить набирать «mcmil», и он вернет 11 результатов за 1 секунду.

Проблема заключается в том, что я набираю «mcmil» все сразу с нуля, я могу видеть первые 11 результатов, тогда результаты скачков, так как результаты для «mcm» и «mcmi» загружаются, предположительно, поскольку они помедленнее.

Когда зажигается .keyup, мне нужно выяснить, выполняется ли в настоящее время запрос .ajax и отменить его, прежде чем создавать новый.

$('#employeesearchbox').keyup(function() { 

    if ($("#employeesearchbox").val().length > 2) { 

     $.ajax({ 
      type: 'POST', 
      url: './webservices/Contacts.asmx/ContactsDirectorySearch', 
      data: JSON.stringify({ Surname: $("#employeesearchbox").val() }), 
      contentType: 'application/json; charset=utf-8', 
      dataType: 'json', 
      success: function (msg) { 
       var employees = msg.d; 
       $.each(employees, function (index, employee) { 
        $('#message').append("<li><a href='javascript:void(0);' class='response_object'>" + employee.Firstname + " " + employee.Department + "</a></li>"); 
       }); 
      }, 
      error: function (xhr, ajaxOptions, thrownError) { 
       console.error("The error was: " + xhr.responseText); 
      } 
     }); 

    } 

}); 

Я посмотрел на этот пост: abort-ajax-requests-using-jquery

Он отменяет запрос непосредственно после .ajax, где, как я, вероятно, хотите, чтобы проверить на следующем нажатии клавиши и, когда я добавить этот код я получаю «объект undefined "- поскольку объект еще не существует!

пожалуйста, помогите

благодаря

var xhr = $.ajax({ 
... 
}); 

//kill the request 
xhr.abort() 

Answer 1

Что о чем-то вдоль этих линий? Создайте идентификатор для каждого отправленного запроса, передайте его на сервер и отправьте его с сервера. Обновляйте документ только в том случае, если запрос не слишком старый.

Я все еще думаю, что вы должны подумать о том, чтобы отлаживать эти запросы. В принципе, не отправляйте запрос до 300 миллисекунд до тех пор, пока они не будут напечатаны или что-то еще.

var requestid = 0; 
    $('#employeesearchbox').keyup(function() { 

     if ($("#employeesearchbox").val().length > 2) { 
      requestid++; 
      $.ajax({ 
       type: 'POST', 
       url: './webservices/Contacts.asmx/ContactsDirectorySearch', 
       data: JSON.stringify({ Surname: $("#employeesearchbox").val(), requestid: requestid }), 
       contentType: 'application/json; charset=utf-8', 
       dataType: 'json', 
       error: function (xhr, ajaxOptions, thrownError) { 
        console.error("The error was: " + xhr.responseText); 
       } 
      }).done(function(msg){ 
       if(msg.requestid >= requestid){ 
        var employees = msg.d; 
        $.each(employees, function (index, employee) { 
         $('#message').append("<li><a href='javascript:void(0);' class='response_object'>" + employee.Firstname + " " + employee.Department + "</a></li>"); 
        }); 
       } 
      }); 

     } 

    }); 

Answer 2

Благодаря @robert, вот рабочий код.

XHR является declaired утратившим OutSite .keyup объем после нажатия клавиши, я могу проверить, если он не равен нулю, и отменить его .abort()

var xhr = null; 

$('#employeesearchbox').keyup(function() { 

    if ($("#employeesearchbox").val().length > 2) { 

     if (xhr == null) { 
      console.error("null"); 
     } else { 
      //kill the request 
      xhr.abort() 
     } 

     xhr = $.ajax({ 
      type: 'POST', 
      url: './webservices/Contacts.asmx/ContactsDirectorySearch', 
      data: JSON.stringify({ Surname: $("#employeesearchbox").val() }), 
      contentType: 'application/json; charset=utf-8', 
      dataType: 'json', 
      success: function (msg) { 
       var employees = msg.d; 
       $.each(employees, function (index, employee) { 
        $('#message').append("<li><a href='javascript:void(0);' class='response_object'>" + employee.Firstname + " " + employee.Department + "</a></li>"); 
       }); 
      }, 
      error: function (xhr, ajaxOptions, thrownError) { 
       console.error("The error was: " + xhr.responseText); 
      } 
     }); 

    } 

}); 

Answer 3

Чтобы расширить на мой комментарий -

Я бы подумал о том, чтобы положить ваш аякс, возможно, на половину секунды setTimeout, который очищается с каждым новым нажатием клавиши. Большинство людей будут печатать быстрее, чем это. Также обратите внимание на ответы на этот вопрос - Average Inter-Keypress time when typing и, возможно, взглянуть на ссылку в комментариях принятого ответа

Например -

var delaySearch; 
$('#employeesearchbox').keyup(function() { 
    if ($("#employeesearchbox").val().length > 2) { 
    clearTimeout(delaySearch); 
    delaySearch = setTimeout(function() { 
     $.ajax({ 
     type: 'POST', 
     url: './webservices/Contacts.asmx/ContactsDirectorySearch', 
     data: JSON.stringify({ Surname: $("#employeesearchbox").val() }), 
     contentType: 'application/json; charset=utf-8', 
     dataType: 'json', 
     success: function (msg) { 
      var employees = msg.d; 
      $.each(employees, function (index, employee) { 
      $('#message').append("<li><a href='javascript:void(0);' class='response_object'>" + employee.Firstname + " " + employee.Department + "</a></li>"); 
      }); 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      console.error("The error was: " + xhr.responseText); 
     } 
     }); 
    }, 500); 
    } 
}); 

Я установить тайм-аут, чтобы 500мс, но кроме вас возможно, захотят пойти немного дольше в зависимости от производительности вашей базы данных и вашей целевой аудитории.