Приложение jQuery полностью блокирует IE8 |Работает во всем остальном просто отлично

Question

Я работаю над тестом ajax / jquery для своей компании, и он без проблем работает в Firefox, Chrome и даже Android.Тем не менее, при работе с IE8 он зависает от необходимости запуска диспетчера задач для завершения процесса IE.Я пробовал разные браузеры в разных операционных системах, и единственный, который доставляет мне проблемы, - это, в частности, IE в Windows.Другие браузеры в Windows не имеют никаких проблем.Я также пробовал на нескольких разных компьютерах.

Сам запрос Ajax в порядке;Я думаю, что именно эффекты скрытия / показа вызывают проблему после того, как пользователь выбирает ответ.Другие ответы должны исчезнуть, и появится некоторый текст ответа, основанный на ответе пользователя.Довольно стандартный.В IE появляется текст ответа, но другие ответы не исчезают, а затем IE сильно блокируется.

Я пытался использовать Firebug Lite, но на самом деле нет никакой возможности получить от него какую-либо обратную связь, поскольку IE зависает до такой степени.

Ниже приведен javascript и ссылка на живой пример ЗДЕСЬ .

 <script type='text/javascript'>
                $(document).ready(function() {
                        var score=0;

                        $('#getStarted').click(function() {
                                $('#instructions').hide('slow');
                                $('#getStarted').hide('fast');
                                $.ajax({
                                        url: "scripts/quizProgress.php",
                                        data: "questionNumber=1",
                                        success: function(xml) {
                                                        var question = $(xml).find("text:[type=question]").text();
                                                        $('#questionDisplay').append(question);
                                                        $('#questionDisplay').show('slow');
                                                        $(xml).find("answer").each(function() {
                                                                var id = $(this).attr('id');
                                                                var answerText = $(this).find("text").text();
                                                                var tbi = "<p correct='";
                                                                if ($(this).find("correct").text() == '0') {
                                                                        tbi += "no";
                                                                }
                                                                else { tbi += "yes"; }
                                                                tbi += "' id='" + id + "'>" + answerText + "</p>";
                                                                $('#answerDisplay').append(tbi);
                                                                var responseText = $(this).find('response').text();
                                                                var responseInsert = "<p id='re"+id+"' class='hideResponse'>"+responseText+"</p>";
                                                                $('#responseDisplay').append(responseInsert);

                                                        });
                                                        $('#answerDisplay').show('slow');
                                                }


                                });
                        });

     $('#answerDisplay').hover(function() {
                                $(this).find('p').hover(function() {
                                        $(this).addClass("answerHover");
                                        }, function() {
                                        $(this).removeClass('answerHover');
                                });
                                $(this).find('p').click(function() {
                                        if ($(this).attr('correct')=='yes') {
                                        score ++;
                                        }
                                        var answer = $(this).attr('id');
                                        var allAnswers = $('#answerDisplay').find('p');
                                        $(allAnswers).each(function() {
                                                if (answer != $(this).attr('id')) {
                                                        $(this).hide('slow');
                                                }
                                                else {
                                                        $(this).addClass('selectedAnswer');
                                                }
                                        var responseID = "re"+answer;
                                        $('#responseDisplay').find('p').each(function() {
                                                if ($(this).attr('id')==responseID) {
                                                        $(this).removeClass('hideResponse');
                                                        $(this).show('slow');
                                                        $(this).addClass('showResponse');
                                                }
                                        });

                                        });
                                });
                        });

                });

Имейте в виду, что это только один вопрос, и он еще не имеет полной функциональности.Я не решаюсь продолжать, пока это вызывает большую часть проблем в IE.Многие наши клиенты ... скажем так, не разбираются в компьютерах, а IE включает в себя множество своих браузеров.

Также: это мое первое приложение jQuery, так что, возможно, я сделал что-то совершенно ужасное.

Спасибо за любую помощь.

Answer 1

Я немного очистил ваш код и изменил отображение и скрытие вопросов и ответов. Надеюсь, это вам пригодится.

var score = 0;
var $answerDisplay = $('#answerDisplay');
var $responseDisplay = $('#responseDisplay');
var $questionDisplay = $('#questionDisplay');
var $instructions = $('#instructions');

$('#getStarted').click(function() {
    var $this = $(this);
    $this.hide('fast');

    $instructions.hide('slow');

    $.ajax({
        url: "scripts/quizProgress.php",
        data: "questionNumber=1",
        success: function(xml) {
            var question = $(xml).find("text:[type=question]").text();
            $questionDisplay.append(question);
            $questionDisplay.show('slow');

            $(xml).find("answer").each(function() {
                var $this = $(this);
                var id = $this.attr('id');
                var answerText = $this.find("text").text();
                var tbi = "<p correct='";

                if ($this.find("correct").text() == '0') {
                    tbi += "no";
                } else {
                    tbi += "yes";
                }

                tbi += "' id='" + id + "'>" + answerText + "</p>";

                $answerDisplay.append(tbi);

                var responseText = $this.find('response').text();
                var responseInsert = "<p id='re" + id + "' class='hideResponse'>" + responseText + "</p>";

                $responseDisplay.append(responseInsert);
            });

            $answerDisplay.show('slow');
        }
    });
});

$answerDisplay.find('p').hover(function() {
    $(this).addClass("answerHover");
}, function() {
    $(this).removeClass('answerHover');
}).click(function() {
    var $p = $(this);

    $p.addClass('selectedAnswer');

    if ($p.attr('correct') == 'yes') {
        score++;
    }

    $p.parent().find(':not(.selectedAnswer)').hide('slow');
    $responseDisplay.find('p#re' + $p.attr('id')).removeClass('hideResponse').show('slow').addClass('showResponse');
});

Answer 2

Я думаю, что это может быть связано с:

$ (это) .hide ( "медленные");

Вы запускаете отдельную анимацию для каждого из ваших невыбранных ответов.

Я не уверен, но, может быть, если вы активировали один .hide () для всех вещей, которые вы хотели скрыть, тогда он может работать быстрее.

Возможно, вы могли бы изменить свой код так, чтобы он сначала отмечал выбранный ответ и скрывал все остальное.

Может быть, заменить это:

var answer = $(this).attr('id');
var allAnswers = $('#answerDisplay').find('p');
$(allAnswers).each(function() {
    if (answer != $(this).attr('id')) {
        $(this).hide('slow');
    } else {
        $(this).addClass('selectedAnswer');
    }

с этим:

$(this).addClass('selectedAnswer');
$('#answerDisplay').find('p').not('.selectedAnswer').hide('slow');

Но, честно говоря, я не знаю точно, как внутренне работает анимация, поэтому я не совсем уверен, будет ли это быстрее.