Автоматически ли jQuery fadeIn() проверяет, виден ли элемент?

ProgramBox

Автоматически ли jQuery fadeIn() проверяет, виден ли элемент? | Эффективность Кодирования

Post author:admin
Запись опубликована:12 января, 2022
Post category:Вопросы по программированию

#javascript #html #jquery #performance

Вопрос:

У меня есть jQuery, загружающий данные для моего веб-приложения. Будучи веб — приложением, весь мой код компилируется в один файл. Им часто пользуются повторно. Размер файла и неэффективность могут серьезно замедлить производительность моего веб — сайта и время загрузки.

Мой вопрос: Есть ли в jQuery встроенные обработчики для избыточности? Мой пример касается функции .fadeIn (). Я не хочу, чтобы $(‘.поиск-вывод’) «исчезал» каждый раз при нажатии клавиши, однако я не хочу добавлять ненужный код, который jQuery уже обрабатывает самостоятельно.

Я предполагаю, что jQuery справляется с этими избыточностями самостоятельно, потому что при запуске этой программы без моего оператора «если видно» анимации нет. Тем не менее, он может запускать другой код, который замедляет работу моего веб-приложения. Является ли лучшей/эффективной практикой кодирования кодирование в моих собственных обработчиках для всего или позволить jQuery обрабатывать это самостоятельно?

Я знаю, что мог бы взглянуть на код jQuery, но у вас, ребята, может быть более ценный вклад, чем просто » да » или «нет».

   $this.find('.search-input input').keyup(function() {
    if ($(this).val() == '') {
      $(this).parent().parent().parent().parent().find('.search-output').fadeOut(150)
    } else {
      if (!$(this).parent().parent().parent().parent().find('.search-output').is(':visible')) {
        $(this).parent().parent().parent().parent().find('.search-output').fadeIn(150)
      }
      formData.append('request', 'req_search_users')
      formData.append('searchString', $(this).val())
      xhr_request(formData, open)
      function open($status, $_rtn) {
        if ($status == 200) {
          $output = $this.find('.search-output')
          $_rtn = $_rtn.split('|,')
          if (parseInt($_rtn[0]) > 0) {
            $output.append($_rtn[1]).ready(function() {
              link_user_click($(this))
            })
          }
          if (parseInt($_rtn[0]) < 3) {
            $this.addClass('eof')
            $this.find('.auto-loader').hide();
          }
        } else {
          console.log('XHR POST: 404 Error')
        }
      }
    }
  })

Это конкретный раздел кода, который мы рассматриваем:

       if (!$(this).parent().parent().parent().parent().find('.search-output').is(':visible')) {
        $(this).parent().parent().parent().parent().find('.search-output').fadeIn(150)
      }

Это мой первый пост о переполнении стека. Спасибо за любой вклад, который вы можете внести!

1. Я нашел jQuery-это что угодно, но эффективный — с jQuery предназначен для работы без перехода на старых и новых браузерах, и поэтому в значительной степени замедлить все равно, — сказав это, ваш код будет возможность выполнять $(this).parent().parent().parent().parent().find('.search-output') дважды в многих случаях (т. е. если условие выполняется) — что неэффективно в любом случае — если jQuery обрабатывает видимость тест уже, то не делай этого

2. Спасибо! Я хочу перейти на чистый JS, но сейчас 90% моего сайта работает на jquery, и я еще интуитивно не знаю чистый js. У меня нехватка времени, иначе я бы потратил больше времени на то, чтобы все переделать. Что делать, если вы назначите $(this).parent().parent().parent().parent().find(‘.поиск-вывод’) переменной и дважды вызовете переменную?

3. конечно, это лучше, но вам вообще не нужно проверять видимость — я предполагаю, что внутренне jQuery делает то же .is(':visible') самое, что и в любом случае, поэтому ваш if является избыточным и, возможно, менее эффективным — хотя такая неэффективность не будет заметна конечным пользователям

4. Кстати, первое, что нужно переписать, — это любое использование $.each … серьезно, когда мы заменили все наши на цикл forEach или for, скорость отклика сайта была настолько улучшена, что мы подумали, что, должно быть, сделали что-то не так, наш сайт не может быть намного более отзывчивым

Ответ №1:

Мой ответ-да. jQuery применяет анимацию затухания ко всем видимым элементам (элементам со свойством CSS display , не равным hidden ). Все методы jQuery, которые оживляют видимость, являются «расширением» <collection>.toggle() метода, который автоматически переключается между hidden inline состояниями и, см. https://api.jquery.com/toggle/