Javascript 了解搜索表单的jQuery实现

我正在进行一个项目，其中包含一个搜索表单，如下所示：

这是HTML，实际上是一个Django模板：

<form action="{% url action %}" method="get" class="left search col s6 hide-on-small-and-down" novalidate>
  <div class="input-field">
    <input id="search" placeholder="{{ placeholder }}"
        autocomplete="off" type="search" name="q"
        value="{{ search_form.q.value.strip|default:'' }}"
        data-query="{{ search_form.q.value.strip|default:'' }}">
    <label for="search" class="active"><i class="material-icons search-icon">search</i></label>
    <i data-behavior="search-clear"
        class="material-icons search-icon"
        {% if not search_form.q.value %}style="display: none;"{% endif %}>close</i>
  </div>
</form>

关于jQuery代码，我有几个问题：

  $(document).on('click', '[data-behavior="search-clear"]', function(e) {
    $('#search').val('').parents('form').submit();
  });

  $(function() {
    setSearchClearVisibility($('#search'));
  });

  $(document).on('keydown', '#search', function(e) {
    var $el = $(this);

    setTimeout(function() {
      setSearchClearVisibility($el);
    }, 10);
  });

  function setSearchClearVisibility(el) {
    if (el.val() === '') {
      $('[data-behavior="search-clear"]').hide();
    } else {
      $('[data-behavior="search-clear"]').show();
    }
  }

  $(document).on('keydown', '#search', function(e) {
    var $el = $(this);

    setTimeout(function() {
      if (e.keyCode !== 27) return;

      $('#search').val('').blur();
      setSearchClearVisibility($el);

      if ($el.data('query') !== '') {
        $('#search').parents('form').submit();
      }
    }, 10);
  });

首先，setSearchClearVisibility函数似乎可以重构如下：

  function setSearchClearVisibility(el) {
    if (el.val() === '') {
      $('[data-behavior="search-clear"]').toggle();
    }
  }

这是否真的相等

其次，这条线似乎也

$(document).on('keydown', '#search', function(e) {

可以用

$('#search').keydown(function(e) {

还是不

第三，我不知道为什么在一些地方会有10毫秒的设置超时。为什么不立即执行该操作

第四，我对这条线感到困惑

if (e.keyCode !== 27) return;

钥匙代码27对应于逃生钥匙；这是否意味着，如果按下的键不是Escape键，函数将返回，并且其下方的代码关闭图标可见性切换和表单提交将不会执行？如果我注释掉这一行，我也不会注意到行为上的任何差异。

1。不，它们不是等价物

如果条件为true，则建议的代码将从现有状态切换到其他状态，如果条件不满足，则不会执行任何更改。 现在的代码是：如果条件为隐藏，则显示

将条件传递给toggle将显示为true，否则隐藏。所以这相当于：

功能设置SearchClearVisibilityel{ $'[data behavior=search clear]'。toggleel.val！==； } 二,$parent.onevent，child，callback与$child.onevent，callback不同

这真的很重要。 对于满足子选择器的所有现有或未来子级，第一个仅在父级上绑定一次。子选择器的计算在事件发生时完成。 第二个为每个孩子绑定一次。因此，如果您有1k个孩子，那么您就有1k个绑定，而不是一个。选择器的计算是在绑定时完成的，而不是在事件时。因此，如果在绑定后添加更多子级，它们将不会在事件上绑定回调

三,。setTimeoutcallback，延迟是最迟在以下时间之间对回调的执行进行排队：

当前执行队列结束 当前时间+延迟 有关详细信息，请参阅。setTimeoutcallback是在执行队列末尾对回调执行进行排队的一种典型方法。它确保当前函数/作用域/线程在运行回调之前完成执行

四,。如果e.keyCode！==27返回；指：

如果按下的键没有退出，退出功能。否则，继续运行跟踪我的程序，直到函数结束。请注意，此函数仅在搜索时的keydown事件上执行。所以，要测试它，你必须让搜索聚焦/激活/选中，然后按键。如果按下的键是escape，则将执行条件后的代码。如果是任何其他键，则不会。建议对setSearchClearVisibility进行的更改假定元素的显示状态始终与空值或非空值相匹配。现有逻辑不做此假设，而是显式地将其设置为应该的值，因此原始版本更加显式和安全。$'search'。KeyDownFunction{与现有版本不等效。现有版本是委托事件绑定，而keydown不是。您应该仔细阅读委托事件处理程序。