Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.08.2012, 16:42
Аватар для ddale
Аспирант
Отправить личное сообщение для ddale Посмотреть профиль Найти все сообщения от ddale
 
Регистрация: 04.07.2012
Сообщений: 50

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

А есть ли способ отловить почему бажет один из практически идентичных скриптов. При этом инспектор в 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, 01.08.2012 в 17:20.
Ответить с цитированием
  #2 (permalink)  
Старый 01.08.2012, 16:48
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

ddale,
Выложите
Ответить с цитированием
  #3 (permalink)  
Старый 01.08.2012, 17:21
Аватар для ddale
Аспирант
Отправить личное сообщение для ddale Посмотреть профиль Найти все сообщения от ddale
 
Регистрация: 04.07.2012
Сообщений: 50

Deff,
выложил
Ответить с цитированием
  #4 (permalink)  
Старый 01.08.2012, 17:37
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

ddale,
Чот я поторопился -
1.Попробуйте обернуть весь второй скрипт вместе с переменными функцией и сделать её вызов (по идее все переменные должны исчезнть из глобальной области видимости
2. Жарко и длинно скрипт - чот я не расчитал свои возможности
Ответить с цитированием
  #5 (permalink)  
Старый 01.08.2012, 17:59
Аватар для ddale
Аспирант
Отправить личное сообщение для ddale Посмотреть профиль Найти все сообщения от ddale
 
Регистрация: 04.07.2012
Сообщений: 50

Deff,
перегрелся я. поясните №1. как правильно сделать. не понимаю, что имеется ввиду.
Ответить с цитированием
  #6 (permalink)  
Старый 01.08.2012, 20:14
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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()

Видим что переменные не передаюся(т.е не видны из глобальной области видимости
Ответить с цитированием
  #7 (permalink)  
Старый 02.08.2012, 12:16
Аватар для ddale
Аспирант
Отправить личное сообщение для ddale Посмотреть профиль Найти все сообщения от ddale
 
Регистрация: 04.07.2012
Сообщений: 50

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

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

Изолировал так. Брал, например, первый скрипт и обрамлял в конструкцию:
(function(){
    // скрипт №1
}())

При этом не возникает никаких ошибок
Ответить с цитированием
  #8 (permalink)  
Старый 02.08.2012, 13:14
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

ddale,
Хм - очевидно скрипт использует внешние переменные - которые нун задать ему в вызывающей функции
Ответить с цитированием
  #9 (permalink)  
Старый 02.08.2012, 14:25
Аватар для ddale
Аспирант
Отправить личное сообщение для ddale Посмотреть профиль Найти все сообщения от ddale
 
Регистрация: 04.07.2012
Сообщений: 50

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

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

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


Причем число 310 - изменяется при движении курсора.
Ответить с цитированием
  #10 (permalink)  
Старый 02.08.2012, 14:32
Аватар для ddale
Аспирант
Отправить личное сообщение для ddale Посмотреть профиль Найти все сообщения от ddale
 
Регистрация: 04.07.2012
Сообщений: 50

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как идентифицировать..как использовать эти классы для двух.. sashajs (X)HTML/CSS 2 11.05.2011 10:11
как отловить событие замены options-ов у select-a? Yurik jQuery 0 26.02.2011 17:18
Ctrl +V как отловить? MadGest Общие вопросы Javascript 3 16.10.2010 19:28
Как отловить для всего документа переход фокуса между элементами. Nominus umbra Общие вопросы Javascript 2 28.04.2010 02:33
Как отловить событие onchange на LookUp поле? spps Events/DOM/Window 0 09.09.2008 16:02