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

Столкнулся с проблемой, есть некая навигация, работает навигация с jsобъектом router, при клике на которую ajax с сервера загружается опр. модуль (html, js, css файлы обернутые в div#module).
Проблема заключается в том что, зайдя в один модуль допустим добавления новой страницы, и перейдя в другой модуль например dashboard и после чего вернувшись обратно в модуль добавления страницы, все js действия выполняются 2 раза. Т.е сам скрипт посути весь модуль находится в который при переходе к другому модулю очищается, т.е физически скриптов на странице нет, но они выполняются. Это как я понял особенность JavaScript, так как решить проблему чтобы js объект удалялся? повторения касаются одного javascipt "класса" объекта, пример ниже:

Это "класс" объект
function Router (){

    // объект
    var it = this;

    // Элемент события
    this.element = null;

    // ответ сервера
    this.data = null;

    // обращаться по адресу
    this.url = '/';

    // Статус присутствия кеша
    this.cache = false;

    // Время хранения кеша
    this.time = 3600;

    // Включение cache
    this.cacheEnabler = false;

    // Событие
    this.eventDOM = 'click';

    // Класс элемента события
    this.classDOM = '';

    // Активация истории
    this.historyEnabler = true;

    // Тип Ajax запроса
    this.type = 'GET';

    // Настройка ajax запроса
    this.param = {

        url:    '/'  ,       // URL страница
        module: '',          // Вызов модуля
        type:   'router' ,   // Тип события
        data:   {}           // Передаваемые параметры

    };

    // Объект ajax loading
    this.nanobar = new Nanobar({
        bg: '#F4485D',
        target: document.getElementById('myDivId')
    });

    // Метод до отправки Ajax
    this.doAjax = function (){

    };

    // Старт модуля
    this.run = function (param){

        // Тип события и элемент события
        this.eventDOM = param.eventDOM || 'click';
        this.classDOM = param.classDOM || '';

        // Ловим событие на всем DOM
        this.eventAjax();

    };

    this.eventAjax = function (){

        // Тут произвольный код касающийся события всего запроса
        $('body').on(this.eventDOM, this.classDOM, function (event){

            it.nanobar.go(10);

            // Элемент события
            it.element = $(this);

            // Делаем некоторые манипуляции до отправки
            it.doAjax();

            it.nanobar.go(45);

            // Отправляем Ajax запрос на сервер
            it.ajax();

            // Сохраняем в историю
            it.historyApi();

            // Останавливаем всплытие
            event.preventDefault();
        });

    };

    // Метод отправки ajax запросов
    this.ajax = function (){

        // Проверяем присутствие кешированной копии
        this.storage();

        // Если есть кешированная копия, показываем ее
        if (this.cache){

            this.successParent();

            return true;
        }

        $.ajax({

            url: it.param.url,

            data: {
                type: it.param.type,
                module: it.param.module,
                data: it.param.data // дополнительные запросы
            },

            type: it.type,

            dataType: 'json',

            success: function (data){

                // Ответ сервера
                it.data = data;

                // основной функционал
                it.successParent();
            }
        });

    };

    // Основаная обертка при поступлении ответа с сервера
    this.successParent = function(){

        // При ответе, загруза идет дальше
        this.nanobar.go(65);

        // Сохранение локальной копии кеша
        this.saveCache();

        // Произвольный код, зависит от поставленой задачи
        this.stop();

        // завершение лоадера
        this.nanobar.go(100);

    };

    // Произвольный код по завершениею ajax запроса
    this.stop = function(){

    };

    // History API - создание системы вперед = назад
    this.historyApi = function () {

        if (!this.historyEnabler) return false;

        history.pushState({foo: 'febox'}, 'Title', '/' + this.param.module + '/' + this.param.data.dashboard_module);
    };

    // LocalStorage Caching
    this.storage = function (){

        if (!this.cacheEnabler) return false;

        // key
        var url = it.module;

        // Если присутствует кешированный модуль страницы, выдаем его
        if ($.jStorage.get(url)){

            // Есть кешированная копия
            it.cache = true;

            // Вытаскиваем кеш
            it.data = $.jStorage.get(url);

        } else {

            // Сохраняем резервную копию
            it.cache = false;
        }

    };

    // Метод сохраняет локальную копию страницы
    this.saveCache = function (){

        if (!this.cacheEnabler) return false;

        // Сохраняем только в том случае если нет сохраненной копии
        if (it.cache) return false;

        // Проверяем есть ли место для хранения в localStorage
        if (!$.jStorage.storageAvailable()){

            // Если нет, чистим localstorage
            $.jStorage.flush();
        }

        var key = it.module;

        var value = it.data;

        $.jStorage.set(key, value, { TTL: it.time });

    };

    // маршрутизация страниц
    this.start = function (){

        // код

    }
}


А это код модуля добавления страницы, вот именно он повторно отправляет Ajax запрос по несколько раз в зависимости сколько раз открыть модуль добавления страницы, хотя в html документе он 1 раз обозначен и при каждом переходе в навигации чистится и на место его приходят другие модули.

// Добавление нового элемента
    var add = new Router ();
    add.start  = function (){

        // Работаем с модулем
        this.param.module = 'dashboard';

        // Действия по завершению
        this.stop = function (){

            var module = $('.columb-content');

            // Очищаем DOM от предыдущего модуля
            module.empty();

            // вставка данных
            module.append(this.data.module);

        };

        // Запускаем маршрутизацию
        this.run({
            eventDOM: 'click',
            classDOM: '.add-new-page'
        });

        this.doAjax = function () {

            // указываем модуль
            this.param.data.dashboard_module = 'content';
            this.param.type = 'add_new_page';
        };

    };
    add.start();


UPD: Я записал видео, где все прекрасно видно
  • Вопрос задан
  • 2681 просмотр
Пригласить эксперта
Ответы на вопрос 1
k12th
@k12th
console.log(`You're pulling my leg, right?`);
Ставьте какой-то флажок (глобальная переменная, атрибут на каком-то DOM-узле, etc) что ваш модуль уже сработал, ну и проверяйте в модуле наличие этого флажка.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы