jQuery навигация, утечка памяти

[Foxeh]

Здравствуйте! Не могу понять, где ошибка в моем скрипте.
- Есть сайт, цель на котором - реализация плавной смены контента внутри блока main. Причина - в итоге есть необходимость играть музыку из раздела аудиозаписей при всей навигации по сайту. Однако, сейчас я ловлю уже 2 проблемы:
- Если выходить на сайт с телефона с 3g - то страницы, на которых есть JS код - не выполняют его (с WiFi нет проблем)
- Если многократно кликнуть на линк с такой страницей - все, что отрабатывалось на ней - перестает работать, в консоль либо не падает ничего, либо

net::ERR_INSUFFICIENT_RESOURCES error ...

Сам скрипт навигации

$(function() {
  String.prototype.decodeHTML = function() {
    return $("<div>", {html: "" + this}).html();
	
  };

  var $main = $("main"),
  
  init = function() {
      
  },
  
  ajaxLoad = function(html) {
    document.title = html
      .match(/<title>(.*?)<\/title>/)[1]
      .trim()
      .decodeHTML();

    init();
  },
  

  loadPage = function(href) {
	//console.log(($main.load).html());
	$main.load(href + " main>*", ajaxLoad);
	
			$("main").css("display", "none");
			$("main").fadeOut(600);
			$("main").fadeIn(600);
		 //console.log(($main));
		 $(document).ajaxComplete(function() {

		   $.get(href, function(scripts) {
					
					var megafurrydom = document.createElement('div');
					megafurrydom.innerHTML = scripts;
					var scr = megafurrydom.getElementsByTagName('script');
				//	 console.log(scr);
			/*	$.each(scr, function (index, lhs)
				{
				$.getScript(lhs);
				eval(lhs);
				console.log(lhs);
				})*/
					for (var i = 0; i < scr.length; ++i) {
					jQuery(document).ready(function ($){
		
							//eval(scr[i].text);
							eval(scr[i].innerHTML);
							//console.log(scr[i]);
							})
							}
				})
				})

							
  };
  
  init();
  
  
  $(window).on("popstate", function(e) {
    if (e.originalEvent.state !== null) {
      loadPage(location.href);
	 // console.log("5");
    }
  });

  $(document).on("click", ".transition", function() {
    var href = $(this).attr("href");
	

    if (href.indexOf(document.domain) > -1
      || href.indexOf(':') === -1)
    {
      history.pushState({}, '', href);
      loadPage(href);
      return false;
    }
  });
});

Не пинайте особо больно, ибо ранее с JS не работал вовсе. Это первый проект, в котором пришлось копаться и в этих дебрях.

[Brutus]

Лень разбираться в коде, но могу сразу сказать утечка из-за использования javascript функций, в частности innerHTML, пиши все на jQuery, то есть если ты начал на j пиши все на нем

на всяк https://learn.javascript.ru/memory-leaks-jquery

[рони]

Foxeh,
бесконечный запрос на сервер? строки 31 и 33

[Foxeh]

По совету знакомого откатился на JQuery 1.11.2 - проблема с бесконечными запросами ушла. А что в этих строках не так? Просто всегда работал только с PHP. Сейчас только вникаю в суть дела с JS а Jquery взял по примеру какого-то из постов на хабре.

[рони]

Foxeh,
.ajaxComplete() Устанавливает обработчик завершения ajax-запроса

jQuery.get() - Осуществляет запрос к серверу методом GET,

любой запрос заканчивается запросом

[Foxeh]

loadPage = function(href) {
	//console.log(($main.load).html());
	$main.load(href + " main>*", ajaxLoad);
	//console.log(href);
			jQuery.each( $("script"), function( i, val ) {
			eval(val);
			})
			//eval($("script").text());
			$("main").css("display", "none");
			$("main").fadeOut(600);
			$("main").fadeIn(600);
		 //console.log(($main));
	  

							
  };

Такое решение не выполняет скрипты со страницы(.
так же, если eval(val); заменить на $.getScript(val);

[Foxeh]

Такая запись

loadPage = function(href) {
	//console.log(($main.load).html());
	$main.load(href + " main>*", ajaxLoad);
	//console.log(href);


			//eval($("script").text());
			$("main").css("display", "none");
			$("main").fadeOut(600);
			$("main").fadeIn(600);
		 //console.log(($main));
		 	console.log($("script"));
			jQuery.each( $("script"), function( i, val ) {
			eval($(val).text());

			})
	  

							
  };

Возвращает в первый клик

[script, script, script, script, script, script, script, script, script, script, prevObject: jQuery.fn.init[1], context: document, selector: "script", jquery: "1.11.2", constructor: function…]

Второй клик:

[script, script, script, script, script, script, script, prevObject: jQuery.fn.init[1], context: document, selector: "script", jquery: "1.11.2", constructor: function…]

Вот и вопрос, куда он потерял 2 скрипта, которые как раз на загружаемой странице?

[Foxeh]

Заметил, что многократный клик по одной и той же странице, будто в цикле начинает добавлять элементы DOM объекта.

$(function() {
  String.prototype.decodeHTML = function() {
    return $("<div>", {html: "" + this}).html();
	
  };

  var $main = $("main"),
  
  init = function() {
      
  },
  
  ajaxLoad = function(html) {
    document.title = html
      .match(/<title>(.*?)<\/title>/)[1]
      .trim()
      .decodeHTML();


    init();
  },
  

  loadPage = function(href) {
	//console.log(($main.load).html());
	$main.load(href + " main>*", ajaxLoad);
	//console.log(href);


			//eval($("script").text());
			$("main").css("display", "none");
			$("main").fadeOut(600);
			$("main").fadeIn(600);
		 //console.log(($main));
		 	  	  	console.log($("script"));
			jQuery.each( $("script"), function( i, val ) {
			eval($(val).text());

			})


							
  };
  
  init();
  
  
  $(window).on("popstate", function(e) {
    if (e.originalEvent.state !== null) {
      loadPage(location.href);

	  
	 // console.log("5");
    }
  });

  $(document).on("click", ".transition", function() {
    var href = $(this).attr("href");
	

    if (href.indexOf(document.domain) > -1
      || href.indexOf(':') === -1)
    {
      history.pushState({}, '', href);
      loadPage(href);
      return false;
    }
  });
});

[Foxeh]

Тему можно закрывать. Отказался от своего решения в пользу pjax.... С которым, увы, тоже без проблем не обошлось(