Ожидание элементов, переменных и событий
Методы в этом разделе помогают выполнять код после появления DOM-элементов, переменных, пользовательских событий или выполнения произвольного условия.
Ожидание элемента
Функция ожидает появления одного или нескольких элементов на странице и вызывает колбэк с NodeList.
Синтаксис
GF.waitForElement(selector, callback, minElements, interval, maximumRetries)GF.waitForElement('.product-item', function (elements) {
console.log(elements);
}, 5, 100, 50);
GF.waitForElement('body', function (elements) {
console.log(elements[0]);
});Ожидание переменной
Функция ожидает появления переменной или функции внутри window. Возвращает Promise.
Синтаксис
GF.waitForVariable(variable, interval, maximumRetries)GF.waitForVariable('someLibrary.jQuery').then(function () {
// window.someLibrary.jQuery is defined
});Подписка на события SDK
GF.PubSub позволяет подписываться на внутренние события скрипта. Чаще всего используются on, once и off.
Синтаксис
const token = GF.PubSub.on(topic, callback);
GF.PubSub.once(topic, callback);
GF.PubSub.off(token);const token = GF.PubSub.on('sl-event', function (data) {
console.log(data.eventName, data.properties);
});
GF.PubSub.off(token);Ожидание выполнения условия
Функция периодически проверяет условие. Если check возвращает true, вызывается onComplete. Если условие не выполнено до timeout, вызывается onFail.
Синтаксис
GF.Utils.waitUntil(check, onComplete, onFail, delay, timeout)GF.Utils.waitUntil(
function () {
return document.querySelectorAll('.someElement').length === 3;
},
function () {
// condition is true
},
function () {
// timeout
},
500,
10000,
);Отправка события при попадании элемента в экран
GF.Utils.sendEventInViewport отправляет событие через GF.API('event', ...), когда элемент попадает в экран. Метод использует IntersectionObserver.
Синтаксис
GF.Utils.sendEventInViewport(target, event, options)GF.Utils.sendEventInViewport('.promo-banner', {
name: 'Promo Banner Viewed',
properties: {
eventType: 'custom',
bannerId: 'summer-sale',
},
}, {
threshold: 0.5,
wait: true,
});