jQuery autocomplete select event и событие размытия по отношению к полю ввода

Question

У меня есть вопрос о компоненте автозаполнения пользовательского интерфейса jQuery. Я инициализировать компонент следующим образом:

var $input = $('#autocompleteInput'); 
$input.autocomplete({ 
    source: source, 
    appendTo: appendToSelector, 
    select: function(event, ui) { 
     console.log('select'); 
    }, 
    minLength: 0 
}); 

//... 

$input.on('blur', function(e) { 
    console.log('blur'); 
}); 

Когда я пытаюсь этот код в браузере и выбрать элемент из списка автозаполнения ниспадающего, я всегда вижу selected печатается перед blur в консоли Chrome:

выбран

размытости

Могу ли я быть уверен, что эти два слушатели аль пути, выполненные в этом порядке (выбранные сначала и размытие после), когда я выбираю элемент из автозаполнения? Как я могу быть уверен, что порядок исполнения всегда будет таким?

Спасибо за внимание.

Answer 1

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

Вот некоторые испытания:

https://jsfiddle.net/Twisty/b4nyguqd/

HTML

<div> 
    <label>Search:</label> 
    <input id="autocompleteInput" type="text" /> 
</div> 
<div class="wrapper"> 
    <div id="eventLog"> 
    </div> 
</div> 

JQuery

function upEvent(log) { 
    var d = new Date(); 
    var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds(); 
    $("#eventLog").append("<p>" + time + " - " + log + "</p>\r\n"); 
} 
$(function() { 
    var source = [ 
    "ActionScript", 
    "AppleScript", 
    "Asp", 
    "BASIC", 
    "C", 
    "C++", 
    "Clojure", 
    "COBOL", 
    "ColdFusion", 
    "Erlang", 
    "Fortran", 
    "Groovy", 
    "Haskell", 
    "Java", 
    "JavaScript", 
    "Lisp", 
    "Perl", 
    "PHP", 
    "Python", 
    "Ruby", 
    "Scala", 
    "Scheme" 
    ]; 
    var $input = $('#autocompleteInput'); 
    var appendToSelector = "#someElem"; 
    $input.autocomplete({ 
    source: source, 
    select: function(event, ui) { 
     upEvent(event.type); 
    }, 
    minLength: 0 
    }); 

    $input.on('blur', function(e) { 
    upEvent(e.type); 
    }); 
}); 

Как пользователь, I C единственный сделать несколько вещей, но, например, вот несколько первых я проверил:

1. Тип «приложения», не результат, показанный: «AppleScript»
2. Стрелка вниз, пока «AppleScript» подсвечивается
3. Пресс клавиша возврата
4. Удалять пока только «А» остается
5. Стрелка вниз «ActionScript»
6. Нажмите Return
7. Щелкните мышью на странице за пределами текстового поля

Результаты:

10:35:18 - autocompleteselect 
10:35:24 - autocompleteselect 
10:35:26 - blur 

Как вы можете видеть, я выполненные обычные операции, но blur никогда не были вызваны, так как я никогда не терял фокус опытного поля.

Update

---

После Вашего комментария, вы можете увидеть:

https://jsfiddle.net/Twisty/b4nyguqd/2/

Мои результаты:

13:54:2 - Temp value updated: AppleScript 
13:54:2 - autocompleteselect 
13:54:6 - Temp Value during blur: AppleScript 
13:54:6 - blur 
13:54:14 - Temp value updated: Asp 
13:54:14 - autocompleteselect 
13:54:20 - Temp Value during blur: Asp 
13:54:20 - blur 

Другой тест не хватает выбора, а также выбора различных значений вес без размывания событий:

13:56:16 - Temp Value during blur: undefined 
13:56:16 - blur 
13:56:22 - Temp value updated: C++ 
13:56:22 - autocompleteselect 
13:56:23 - Temp Value during blur: C++ 
13:56:23 - blur 
13:56:28 - Temp value updated: C 
13:56:28 - autocompleteselect 
13:56:32 - Temp value updated: C++ 
13:56:32 - autocompleteselect 
13:56:34 - Temp Value during blur: C++ 
13:56:34 - blur