IntersectionObserver
это отличный способ проверить, виден ли элемент в окне просмотра .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const callback = (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { // `entry.target` is the dom element console.log(`${entry.target.id} is visible`); } }); }; const options = { threshold: 1.0, }; const observer = new IntersectionObserver(callback, options); const btn = document.getElementById("btn"); const bottomBtn = document.getElementById("bottom-btn"); observer.observe(btn); observer.observe(bottomBtn); |
Вы можете настроить поведение наблюдателя с помощью option
параметра. threshold
— самый полезный атрибут, он определяет процент элемента, который должен быть виден в окне просмотра, чтобы наблюдатель сработал .
Вы можете использовать navigator.userAgent
для получения подробной информации и обнаружения устройства, на котором запущено приложение.
1 2 3 4 5 6 7 8 9 10 11 |
const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ) ? "Mobile" : "Desktop"; console.log(detectDeviceType()); |
Вы можете просто переключать видимость элемента с помощью style.visibility
свойства, и если вы хотите удалить его из потока рендеринга , вы можете использовать это style.display
свойство.
1 2 3 4 5 6 7 8 |
const hideElement = (element, removeFromFlow = false) => { removeFromFlow ? (element.style.display = "none") : (element.style.visibility = "hidden"); }; |
Если вы не удалите элемент из потока рендеринга, он будет скрыт, но его место все равно будет занято. Это очень полезно при рендеринге длинных списков элементов. Элементы, НЕ находящиеся в поле зрения (можно проверить с помощью IntersectionObserver
), могут быть скрыты для повышения производительности .
JavaScript превращает выборку parameters
с любого адреса в прогулку по парку, используя URL
объект.
1 2 3 4 5 6 |
const url = new URL(window.location.href); const paramValue = url.searchParams.get("paramName"); console.log(paramValue); |
Вы можете преобразовать deep copy
любой объект в строку и обратно в объект.
1 2 3 4 |
const deepCopy = (obj) => JSON.parse(JSON.stringify(obj)); |
wait
функцияJavaScript поставляется с setTimeout
функцией, но он не возвращает Promise
объект, что затрудняет его использование в async functions
. Итак, мы должны написать свою собственную функцию wait
/ .sleep
1 2 3 4 5 6 7 8 9 10 11 |
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); const asyncFunc = async () => { await wait(1000); console.log("async"); }; asyncFunc(); |
Функции не большие, поэтому попробуйте их все!
Источник статьи: http://dev.to/