Вынес JS код в отдельный файл. Тормозит

19 апреля 2021, 10:20

Есть небольшой скрипт на сайте. так вот я давно его писал и поэтому оно написано как попало. теперь решил привести код в порядок... Но как говорится - не ремонтируй пока работает))) рассмотрим 3 файла(упрощённая схема)

index.php

<!DOCTYPE html> 
<html> 
<head> 
	<!-- Подключаем JavaScript-файл с нашим сценарием, который и будет получать данные об автомобилях --> 
	<script src="js/custom.js"></script> 
	<!-- Подключение скрипта PCL's Nice Tooltip --> 
	<script type="text/javascript" src="js/pcl_tooltip.js"></script> 
</head> 
<!-- при загрузке боди, подключается скрипт. может влияет. решил указать--> 
<body onload="PCL_TooltipInit();">	 
	<div id="form">	 
		<form id="searchFormx"> 
			<div id="marki"> 
				<select id="select_marka"> 
					<option value="">Выберите марку</option> 
					<?php foreach($marki as $marka): ?> 
							<option value="<?php echo $marka['marka_id'];?>"><?php echo $marka['marka_name'];?></option> 
					<?php endforeach; ?> 
				</select> 
			</div> 
			<div id="modele">	</div> 
			<div id="cars"></div> 
		</form>	 
		<div id="info"></div> 
		<div style=" width:100%; height:1px; clear:both;"></div> 
	</div> 
	<div id="msg"></div> 
	<div id="search-result"></div> 
</body> 
</html>

search.php

<?php if(isset($_POST['marka_id']) && $_POST['marka_id'] != ""): ?> 
	<?php  
		$marka_id = $_POST['marka_id']; 
		$modele = getModel($marka_id); 
	?> 
	<select id="select_model"> 
			<option value="">Выберите модель</option> 
			<?php foreach($modele as $model): ?> 
					<option value="<?php echo $model['model_id'];?>"><?php echo $model['model_name'];?></option> 
			<?php endforeach; ?> 
	</select> 
<?php endif; ?> 
 
<?php if(isset($_POST['model_id']) && $_POST['model_id'] != ""): ?> 
	<?php  
		$model_id = $_POST['model_id']; 
		$cars = getCars($model_id); 
	?> 
	<select id="select_car"> 
			<option value="">Выберите модификацию</option> 
			<?php foreach($cars as $car): ?> 
					<option value="<?php echo $car['car_id'];?>"><?php echo $car['car_name'];?></option>		 
			<?php endforeach; ?> 
	</select>	 
 
<?php endif; ?> 
<!-- не видит скрипт по относительному пути, пришлось абсолютный писать, и добавление async не помогло--> 
<script src="абсолютный путь к файлу/custom.js" async></script>

custom.js

$(document).ready(function(){
    $('#select_marka').change(function(){
        $.post(
            'php/search.php',
            { marka_id:$('#select_marka').val()},
            function(res){
                $('#modele').html(res);
                $('#search-result').empty();
                $('#msg').empty();                  
                $('#cars').empty();
                $('#searchForm').trigger( 'reset' );
            }
        )
    });
    $('#select_model').change(function(){
        $.post(
            'php/search.php',
            { model_id:$('#select_model').val()},
            function(res){
                $('#cars').html(res);
                $('#search-result').empty();
                $('#msg').empty();
            }
        )
    });
    $('#select_car').change(function(){
        $.post(
            'php/search.php',
            { car_id:$('#select_car').val()},
            function(res){
                $('#info').html(res);
                PCL_TooltipUpdate();
                $('#search-result').empty();
                $('#msg').empty();
            }
        )
    });

});

Вот так всё начинает дико тормозить при уже 3-4 обращении, потом вообще список перестаёт подгружаться. Так как будто память забивается.

если вынести часть JS кода непосредственно в файл search.php и отключить файлик js из search.php

    <script>$('#select_model').change(function(){ 
		 
			$.post( 
				'php/search.php', 
				{ model_id:$('#select_model').val()}, 
				function(res){ 
					$('#cars').html(res); 
					$('#search-result').empty(); 
					$('#msg').empty(); 
					 
				} 
			) 
		}); 
</script> 
<script> 
		$('#select_car').change(function(){ 
		 
			$.post( 
				'php/search.php', 
				{ car_id:$('#select_car').val()}, 
				function(res){ 
					$('#info').html(res); 
					PCL_TooltipUpdate(); 
					$('#search-result').empty(); 
					$('#msg').empty(); 
					 
				} 
			) 
		}); 
}); 
</script>

всё работает без тормозов. В чём дело, подскажите? как я вижу проблемы выполнения кода в файле search.php... но почему? P.S. Мне тут подсказывают что это не JS a jQuery))) Да. извините. Не обратил внимание.

Answer 1

Каждый раз, когда Вы подключаете файл "custom.js" в search.php, он грузится в страницу, и код в нем выполняется. Каждый раз к событию $('#select_marka').change добавляется новый обработчик. Все эти обработчики выстреливают, обновляют части html и снова многократно грузят "custom.js". Количество обработчиков увеличивается в геометрической прогрессии. Оставьте только "custom.js" в head.

$('#cars').on('change', '#select_model', function(){
$('#info').on('change', '#select_car', function(){

я не пойму почему если непосредственно в файле search код то всё работает идеально

Работает не идеально. То же самое явление присутствует и в таком случае, но в меньшем масштабе - Вы добавляете одинаковые обработчики только к $('#select_model').change, и эти обработчики сбрасываются (так как пересоздается кусок страницы) в момент, когда Вы меняете марку машины.

как тогда исправить?

$(document).on('change', '#select_marka', function(){ 
  ...
});
$(document).on('change', '#select_model', function(){ 
  ...
});
$(document).on('change', '#select_car', function(){
  ...
});