Как запретить создавать объекты, после создания одного?

Question

[rises]

Для того чтобы карта яндекса загружалась не сразу с загрузкой страницы, а только когда пользователь до нее доскролит было написано вот это

$(window).scroll(function () {
    var el = $('.map');
    if ($(this).scrollTop() > el.offset().top - 800) {
    var script = document.createElement('script');
    script.src = "https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A114d3eb4d1680b26a069e6412a7102973f0bf72f6c99f019d48be4101695e679&width=100%25&height=640&lang=ru_RU&scroll=false";
    
    el.append(script);
  };
  });

Свою задачу эта конструкция конечно решила, но появилась новая проблема, карта создается не одна, а много, чего собственно и надо избежать

Comments

[Роман]

Для оформления кода есть спецтег <code>Ваш код</code>. Не забывайте им пользоваться, это сделает представление вашего кода красивее и повысит шансы получить ответ на вопрос)

[rises]

Роман, я это учту в будущем, спасибо)

Answer 1

[Роман]

Не задумываясь глубоко над тем как это можно было бы реализовать правильно и красиво (просто добавил флаг isMapAdded:)

var isMapAdded = false;

$(window).scroll(function () {
  var el = $('.map');
  if ($(this).scrollTop() > el.offset().top - 800) {
    if(isMapAdded) return;
    isMapAdded = true;
    var script = document.createElement('script');
    script.src = "https://api-maps.yandex.ru/services/constructor/1....";
    el.append(script);
  };
});

Answer 2

[Stalker_RED]

Проверяйте создана ли карта, и если уже есть - не создавайте новую.
И лучше не через DOM, а заведите флаг.

Answer 3

[Евгений]

Можно так сделать

var mapFlag = false;
$(window).scroll(function () {
if (mapFlag == true) {
var el = $('.map');
if ($(this).scrollTop() > el.offset().top - 800) {
var script = document.createElement('script');
script.src = "https://api-maps.yandex.ru/services/constructor/1....";

el.append(script);
mapFlag = false;
}
}
});

Comments

[Роман]

Евгений, вы немного отпечатались видимо:

if (mapFlag == true) { // по все видимости тут хотели написать mapFlag = false;
...
el.append(script);
mapFlag = false; // по все видимости тут хотели написать mapFlag = true;
...

или наоборот:

var mapFlag = false; // по все видимости тут хотели написать var mapFlag = true;
...

[Евгений]

Роман, да, спасибо