Как addListener работает с matchmedia API?

Question

Что бы matchMedia("(min-width: 500px)").addListener(foo); делать? Вот что делает addListener() Функция здесь? Это выполняет функцию foo() когда ширина окна просмотра изменяется?

Answer 1

Да, он выполняет foo функция

когда оцениваемый результат медиа-запроса изменяется.

(из MDN)

В вашем случае это означает, что если вы начнете с окна шириной более 500 пикселей, а затем измените его размер до 500 пикселей, функция будет выполнена. Если вы позже измените его размер на ширину более 500 пикселей, функция будет выполнена снова.

Функция вызывается с MediaQueryListEvent в качестве первого аргумента. Содержит логическое значение matches свойство, которое указывает, соответствует ли ваш медиа-запрос текущему окну просмотра.

Answer 2

Слушатель foo() будет выполняться при изменении оценки медиазапроса (либо из true в false или из false в true,

Существует важное различие между matchMedia(...).addEventListener(foo) а также window.onResize(foo), В бывшем, foo() будет выполняться только при изменении оценки медиазапроса. Позже foo() будет повторяться каждый раз, когда окно браузера меняет размер. Если вы нацелены на определенные контрольные точки, вам нужно будет проверить их внутри foo() перед выполнением другой логики.

matchMedia(...).addEventListener(foo) позволяет писать логику в foo() это более сфокусировано без включения дополнительной логики (или других вызовов функций) для проверки измерения в браузере или другой информации, которая может быть оценена медиа-запросом. Существует также потенциальный выигрыш в производительности от использования matchMedia(...).addEventListener(foo) над window.onResize(foo) в этом foo() будет выполняться реже.

Отказ от ответственности: я не делал реальных сравнений производительности между этими двумя подходами. Мое предположение основано на идее, что обработчик событий, который не выполняется, работает быстрее, чем обработчик событий. Это, однако, не учитывает каких-либо внутренних различий между двумя подходами.