Функция размытия JQuery (из учебника)

Question

Я следую этому руководству, инструктор идет довольно быстро и не объясняет некоторые части, поэтому я собираю много документации и до сих пор это довольно хорошо. Одна вещь, которую я не могу понять, почему это для моего .on ('blur', function() {.., мне нужно включить функцию() {} после продолжительности 400 мс. Почему мне не нужно включать функцию() {}, когда я использовал функцию фокуса? Если да, то какова цель этой функции в любом случае? Инструктор просто набрал это, и я не совсем уверен, почему. Кстати, я делаю небольшую поисковую систему и инструктор переживает, как это сделать.

$(document).ready(function(){ 

    var searchField = $('#query'); 
    var icon = $('#search-btn'); 

    $(searchField).on('focus',function(){ 

     $(this).animate({ 

      width:'100%' 

     },400); 

     $(icon).animate({ 
      right:'100px' 
     }, 400); 
    }); 

    $(searchField).on('blur', function(){ 
     if(searchField.val() == '') 
     { 
      $(searchField).animate(
       { 
       width:'45%' 
       },400,function(){}); 

      $icon.animate({ 
       right:'45%' 
       },400,function(){}); 


     } 

}); 

}) 

Answer 1

Я предполагаю, что вы имеете в виду пустой функционального блока здесь ?:

$(searchField).animate(
    { 
     width:'45%' 
    },400,function(){}); // <-- in here 

это функция обратного вызова. Поскольку анимация является асинхронной операция (бея ch должен принимать в этом случае 400 мс), он не блокирует код, чтобы дождаться его завершения. Поэтому, если вам нужно что-то, что вы хотите сделать после, он будет завершен, он войдет в этот функциональный блок.

Для примера рассмотрим следующее:

$(searchField).animate(
    { 
     width:'45%' 
    },400,function(){ 
     console.log('first'); 
    }); 
console.log('second'); 

Поскольку код является асинхронным, 'second' будет фактически вошли в консоль перед тем'first'. Это связано с тем, что в то время как .animate() «делает свою вещь» асинхронно, остальная часть кода продолжает выполняться. Обратный вызов затем вызывается после этой асинхронной операции.

Поскольку функциональный блок пуст, вам на самом деле он не нужен, и, возможно, он просто может полностью опустить его. Однако, возможно, что инструктор в этом учебнике помещает его в качестве заполнителя для будущего шага.