Как отловить баги в двух идентичных скриптах
 

Привет, ребята!

А есть ли способ отловить почему бажет один из практически идентичных скриптов. При этом инспектор в Chrome не показывает никаких ошибок. В Firefox "Use of globalStorage is deprecated. Please use localStorage instead.". Суть в том, что и там и там используются одинаковые переменные. Я исправил во втором скрипте их имена, но безрезультатно.

Если нужно могу выложить листинги кода.

scroller.js

var train_width_2 = 0;
var train_timer_2;
var velocity_2;
var max_shift_2 = 0;
var x = 0;

function move_train()
{
	if (max_shift_2 > 0)
	{
		x = x + velocity_2;
		
		if (x > 0) x = 0;
		if (x < (-1*(max_shift_2))) x = -1*(max_shift_2);
		
		$(".thumbs").css("left", x + "px");
	}
}

//find position cursor mouse enter element
function rPosition(element, mouseX, mouseY) {
	var offset = $(element).offset();
	var x = mouseX - offset.left;
	var y = mouseY - offset.top;
	
	return {'x': x, 'y': y};
}

$(function() {
  	//size train
  	$(".thumbs a").each(function (i) {
		train_width_2 = train_width_2 + $(this).width();
	});
// правка ----------------------------------------------------------------------------
// $(".thumbs").width(train_width_2);
$(".thumbs").width(train_width_2);
// \ правка ----------------------------------------------------------------------------
var w_slider = $("#content_bottom").width();

if(train_width_2 > w_slider) {
		$(".thumbs").css({"margin-left":"-480px"});
		} else {
		$(".thumbs").css({"left" : "50%", "margin-left": "-" + train_width_2/2 + "px"});
		}

  	//animat cursor train enter
  	$("#content_bottom").mouseover(function(){
		train_timer_2 = window.setInterval("move_train();", 10);
	});
	
	//animat cursor train exit
	$("#content_bottom").mouseout(function(){
		window.clearInterval(train_timer_2);
	});
    
	$(window).resize(function(){
		velocity_2 = 0;
		max_shift_2 = train_width_2 - $("#content_bottom").width();
		
		if(max_shift_2 > 0) {
		$(".thumbs").css({"margin-left":"0px"});
		move_train();
		} else {
		$(".thumbs").css({"left" : "50%", "margin-left": "-" + train_width_2/2 + "px"});
		}

	});
	
	//Рассчитываем текущую скорость, которая зависит от координаты мышки на поезде
	$("#content_bottom").mousemove(function(e){
		
		train_width_2 = 0;
		
		$(".thumbs a").each(function (i) {
			train_width_2 = train_width_2 + $(this).width();
		});
		
		//Считаем полудлину поезда, чтобы посчитать скорость, которая с разным знаком в разных половинах поезда
		var half_width = Math.round($(this).width()/2);
		
		var elementCoords = rPosition(this, e.pageX, e.pageY);
		//Пересчитали максимум, на который можно сдвигать поезд, он зависит от размеров окна
		max_shift_2 = train_width_2 - $(this).width();
		
		//Рассчитываем скорость. Делим на 100, чтобы было плавнее. Скорость будет в пределах от 0 до 9
		velocity_2 = Math.round((half_width - elementCoords.x)/500);
	});
});

look2.js

// Предзагрузчик изображений
jQuery.preloadImages = function () {
    if (typeof arguments[arguments.length - 1] == 'function') {
        var callback = arguments[arguments.length - 1];
    } else {
        var callback = false;
    }
    if (typeof arguments[0] == 'object') {
        var images = arguments[0];
        var n = images.length;
    } else {
        var images = arguments;
        var n = images.length - 1;
    }
    var not_loaded = n;
    for (var i = 0; i < n; i++) {
        jQuery(new Image()).attr('src', images[i]).load(function () {
            if (--not_loaded < 1 && typeof callback == 'function') {
                callback();
            }
        });
    }
}

// Объявляем переменные
var train_height = 0;
var train_timer;
var velocity;
var max_shift = 0;
var x = 0;
var flag = 0;

var train_img = 0;

// Предзагрузчик изображений
$.preloadImages(["images/content/img_2.jpg"], function () {
    $("#pano").css({
        "visibility": "visible"
    });
    train_img = $("#pano img").height();
    $("#pano").css({
        "height": train_img
    });
});



// Сдвигаем поезд при каждом обновлении кадра
function move_train() {
    if (max_shift > 0) {


        x = x + velocity;

        if (x > 0) x = 0;
        if (x < (-1 * (max_shift))) x = -1 * (max_shift);

        $("#pano").css({
            "top": x + "px",
            "height": train_img
        });

        if (velocity > 0) {

            $("#prev_img").show();
            $("#next_img").hide();
        }

        if (velocity == 0) {
            $("#next_img").hide();
            $("#prev_img").hide();
        }

        if (velocity < 0) {
            $("#next_img").show();
            $("#prev_img").hide();
        }

        if (x == 0) {
            $("#prev_img").hide();
        }
        if (x == "-" + max_shift) {
            $("#next_img").hide();
        }

    }
}

// Функция находит позицию курсора мыши внутри элемента
function rPosition(element, mouseX, mouseY) {
    var offset = $(element).offset();
    var x = mouseX - offset.top;
    var y = mouseY - offset.top;

    return {
        'x': y,
        'y': x
    };
}

$(function () {

    $("#next_img").hide();
    $("#prev_img").hide();

    // Считаем длину поезда, для этого складываем длины всех вагонов 
    train_height = train_height + $("#pano").height();
    train_img = $("#pano img").height();

    var controller_height = $("#look").height();

    x = -1 * train_height / 2 + controller_height / 2;

    // alert(train_height);
    $("#pano").css({
        "top": x + "px",
        "height": train_img
    });

    // Запускаем цикл анимации если курсор мыши над поездом
    $("#look").mouseover(function () {
        //alert("");
        train_timer = window.setInterval("move_train();", 10);
    });

    // Останавливаем цикл анимации если курсор мыши ушел с поезда
    $("#look").mouseout(function () {
        window.clearInterval(train_timer);
        $("#next_img").hide();
        $("#prev_img").hide();
    });

    $(window).resize(function () {
        velocity = 0;
        max_shift = train_height - $("#look").height();
        train_img = $("#pano img").height();
        move_train();
    });

    // вход курсора в зону слайдера
    $('#look').mouseenter(function () {
        // анимации header и bottom_block
        $('#header').stop(true, false).animate({top: '-6px'}, 210, 'linear');
        $('#bottom_block').stop(true, false).animate({bottom: '-6px'}, 210, 'linear');

        elem = $("#header");
        if (elem.hasClass ("height_null")) {
            $('#header').stop(true, false).animate({top: '-200px'}, 0, 'linear');
            $('#bottom_block').stop(true, false).animate({bottom: '-220px'}, 0, 'linear');
        }

        // замена текста у курсора
        active = $(".cur_div");
        alt_attr = $(active).find('img').attr("alt");
        $('#cursor p').text(alt_attr);

        // показываем курсор
        $('#cursor').show();
        return false;
    });

    //Рассчитываем текущую скорость, которая зависит от координаты мышки на поезде
    $("#look").mousemove(function (e) {

        // отслеживание перемещения нестандартного курсора в пределах слайдера
        var Cur = $('#cursor');
        Cur.css({
            'left': parseInt(e.pageX - 0) + 'px',
            'top': parseInt(e.pageY - 80) + 'px',
            'opacity': 1.0,
        });

        train_height = 0;
        train_height = train_height + $("#pano").height();
        //Считаем полудлину поезда, чтобы посчитать скорость, которая с разным знаком в разных половинах поезда
        var half_height = Math.round($(this).height() / 2);

        var elementCoords = rPosition(this, e.pageX, e.pageY);
        //Пересчитали максимум, на который можно сдвигать поезд, он зависит от размеров окна
        max_shift = train_height - $(this).height();

        var sign = velocity;

        //Рассчитываем скорость. Делим на 100, чтобы было плавнее. Скорость будет в пределах от 0 до 9
        velocity = Math.round((half_height - elementCoords.x) / 100);
    });

    // клик на зоне слайдера
    $("#look").click(function() {
        $('#header').stop(true, false).animate({top: '-200px'}, 500, 'linear').addClass('height_null');
        $('#bottom_block').stop(true, false).animate({bottom: '-220px'}, 500, 'linear').addClass('height_null');

        // курсор изменился
        $('#cursor').removeClass('plus_cursor').addClass('close_cursor');

        // зоны стрелок активны
        $('.bx-prev').css({'display': 'block'});
        $('.bx-next').css({'display': 'block'});

        if ($('#header').css('top') === '-200px') { 
            $('#header').stop(true, false).animate({top: '-6px'}, 400, 'linear').removeClass('height_null');
            $('#bottom_block').stop(true, false).animate({bottom: '-6px'}, 400, 'linear').removeClass('height_null');

            $('#cursor').removeClass('close_cursor').addClass('plus_cursor');

            $('.bx-prev').css({
                'display': 'none'
            });
            $('.bx-next').css({
                'display': 'none'
            });
            
            // показать курсор
            $('#cursor').show();
            return false;
        }
    });
    // $('#look').live()
    
    // выход курсора из зоны слайдера
    $('#look').mouseleave(function (){

        if ($('#header').css('top') !== '-200px') {
            $('#header').stop().animate({top: '0'}, 210, 'linear');
            $('#bottom_block').stop().animate({bottom: '0'}, 210, 'linear');
        }

        //$('#header').stop().animate({top: '0'}, 210, 'linear');
        //$('#bottom_block').stop().animate({bottom: '0'}, 210, 'linear');
        $('#cursor').hide();
        return false;
    });

});

ddale,
Выложите

Deff,
выложил :)

ddale,
Чот я поторопился -
1.Попробуйте обернуть весь второй скрипт вместе с переменными функцией и сделать её вызов (по идее все переменные должны исчезнть из глобальной области видимости
2. Жарко и длинно скрипт - чот я не расчитал свои возможности

Deff,
перегрелся я. поясните №1. как правильно сделать. не понимаю, что имеется ввиду.

ddale,
Есть скрипт

var a=14;
alert('Верхний alert'+a)
//Тут какая та функция
function Tst(){
alert('нижний alert'+a)
} Tst()

Видим что переменная второй части скрипта не изолирована от первой
======================
Тогда первую (без разницы - можно и вторую
обертываем вызываем

(function(){
var a=14;
alert('Верхний alert'+a)
}())
//Видим, что переменные не передаются во вторую часть
function Tst(){
alert('нижний alert'+a)
} Tst()

Видим что переменные не передаюся(т.е не видны из глобальной области видимости

Deff,
Попробовал изолировать и тот и другой скрипт по отдельности. Потом слил в один файл и также попробовал изолировать поочередно.

Тот скрипт который изолируется - не работает.

Изолировал так. Брал, например, первый скрипт и обрамлял в конструкцию:

(function(){
    // скрипт №1
}())

При этом не возникает никаких ошибок

ddale,
Хм - очевидно скрипт использует внешние переменные - которые нун задать ему в вызывающей функции

Deff,
Смотрите, а вот что еще я сделал, и это дало ошибку. Я закомментил scroller.js, а look2.js изолировал функцией без дополнительных параметров.

Выдается ошибка:

310
Uncaught ReferenceError: move_train is not defined
(anonymous function)

Причем число 310 - изменяется при движении курсора.

Deff,
Урааааааааа! Вопрос закрыт. Я просто заменил в одном из скриптов "move_train" на "move_train_2". Это имя функции.

Но всё равно вам большое спасибо. Я теперь порядком прочитал про глобальные и локальные переменные! :)