Javascript заставляет браузер висеть

Question

Несмотря на то, что консольный журнал дает выражение while как ложное, цикл работает бесконечно.

var tile_height; 
$(document).ready(function(){ 
tile_height = $("#department > .front").height(); 
     }); 
     function tile_animate(e){ 
     console.log(($('> .front',e).css("height") > '0px') && ($('> .back',e).height() < tile_height)); 
     while(($('> .front',e).css("height") > '0px') && ($('> .back',e).height() < tile_height)) 
      { 
       $('> .front',e).animate({height: '-=1px'}); 
       $('> .back',e).animate({height: '+=1px'}); 
      } 
     } 

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

HTML код

<div class="tiles" id="gallery" onmouseover="javascript:tile_animate(this)"> 
    <div class="front"> 
    </div> 
    <div class="back"> 
    </div> 
</div> 

Answer 1

Проблема в том, что вы используете петлю во время зависания. Лучше, что вы используете анимацию jQuery в стиле и применяете ее, когда это необходимо.

Однако, как вы описали проблему, похоже, что вы сжимаете div сразу - нет ничего, чтобы восстановить его после. Я заметил, что div был назван «департамент», но JavaScript искал «галерею» - поэтому я изменил это ...

Итак, чтобы перенести это, так как у вас есть свой код сейчас, несколько настроек :

Удалите петлю while и выполняйте проверку вместо этого во время зависания.

Проверка заключается в том, чтобы увидеть, существует ли анимация.

Если анимация происходит, игнорируйте зависание.

Если анимация еще не создана, установите флаг, чтобы сказать, что она есть, и выполните требуемую анимацию - не уменьшайте размер пикселя div на пиксель (это то, что делает анимация для вас).

Когда закончите, div будет иметь высоту 0px (и не может снова зависнуть).

Если вы хотите, чтобы восстановить DIV позже, а затем сохранить его первоначальные размеры до анимации, и восстановить их при необходимости (не забывая при этом, чтобы сбросить переменную внутрицикловой) ...

var tile_height; 
 
var inLoop = false; 
 
$(document).ready(function() { 
 
    tile_height = $("#gallery > .front").height(); 
 
}); 
 

 
function tile_animate(e) { 
 
    if (!inLoop && ($('> .front', e).css("height") > '0px') && ($('> .back', e).height() < tile_height)) { 
 
    inLoop = true; 
 
    $('> .front', e).animate({ 
 
     height: '0px' 
 
    }); 
 
    $('> .back', e).animate({ 
 
     height: tile_height 
 
    }); 
 
    } 
 
}

Answer 2

Поскольку вы используете JQuery, почему вы не просто вставлять свой код и вызвать функцию из обработчика событий в JS:

var tile_height; 
 

 
$(document).ready(function() { 
 
    tile_height = $("#department > .front").height(); 
 
    $("#gallery").mouseover(function() { 
 
    e = this; 
 
    console.log(($('> .front', e).css("height") > '0px') && ($('> .back', e).height() < tile_height)); 
 
    while (($('> .front', e).css("height") > '0px') && ($('> .back', e).height() < tile_height)) { 
 
     $('> .front', e).animate({ 
 
     height: '-=1px' 
 
     }); 
 
     $('> .back', e).animate({ 
 
     height: '+=1px' 
 
     }); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 

 
<div class="tiles" id="gallery"> 
 
    <div class="front">front</div> 
 
    <div class="back">back</div> 
 
</div>

Answer 3

Javascript однопоточен. В частности, ваш код должен завершить выполнение до того, как начнется другой поток. Другой поток, который вас действительно интересует, - это цикл анимации JQuery, который по умолчанию включает цикл таймера таймера 14 мс.

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