Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.07.2019, 15:01
Интересующийся
Отправить личное сообщение для graf_vorontsov Посмотреть профиль Найти все сообщения от graf_vorontsov
 
Регистрация: 13.06.2017
Сообщений: 14

Вынес JS код в отдельный файл. Тормозит.
Есть небольшой скрипт на сайте.
так вот я давно его писал и поэтому оно написано как попало. теперь решил привести код в порядок... Но как говорится - не ремонтируй пока работает)))
рассмотрим 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>


а первая часть остаётся подключена в index.php через файл js.
всё работает без тормозов. В чём дело, подскажите?

как я вижу проблемы выполнения кода в файле search.php... но почему?

P.S. Мне тут подсказывают что это не JS a jQuery))) Да. извините. Не обратил внимание.

Последний раз редактировалось graf_vorontsov, 22.07.2019 в 17:30.
Ответить с цитированием
  #2 (permalink)  
Старый 22.07.2019, 17:20
Интересующийся
Отправить личное сообщение для graf_vorontsov Посмотреть профиль Найти все сообщения от graf_vorontsov
 
Регистрация: 13.06.2017
Сообщений: 14

ок... это jQuery
но сути это не меняет.
Библиотека подключена в файле index.php
Ответить с цитированием
  #3 (permalink)  
Старый 22.07.2019, 22:00
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,723

Сообщение от graf_vorontsov
Мне тут подсказывают что это не JS a jQuery
jq - библиотека написанная на js, так что выражение "Вынес JS код в отдельный файл." здесь вполне уместно.

У вас файл custom.js, возможно, подключается к странице каждый раз, как запрос к файлу search.php отправляется.
Перенесите custom.js в индекс, а обработчики событий вешайте на document.body.
Думаю это поможет.
Ответить с цитированием
  #4 (permalink)  
Старый 22.07.2019, 23:47
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от Русский
Но практически же это не JS, а уродливая надстройка над ним
А так же любой язык уродливая надстройка над машинным кодом.
Ответить с цитированием
  #5 (permalink)  
Старый 23.07.2019, 10:32
Интересующийся
Отправить личное сообщение для graf_vorontsov Посмотреть профиль Найти все сообщения от graf_vorontsov
 
Регистрация: 13.06.2017
Сообщений: 14

Сообщение от Nexus Посмотреть сообщение
Перенесите custom.js в индекс
custom.js и так подключен в index.php, но если не подключить его в search.php то вообще не видит.
первая часть custom.js срабатывает отлично, и данные обрабатываются нормально, список моделей заполняется, а дальше не идёт.
$('#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();
					
				}
			)
		});

эта часть не работает

Последний раз редактировалось graf_vorontsov, 23.07.2019 в 11:06.
Ответить с цитированием
  #6 (permalink)  
Старый 23.07.2019, 11:41
Интересующийся
Отправить личное сообщение для graf_vorontsov Посмотреть профиль Найти все сообщения от graf_vorontsov
 
Регистрация: 13.06.2017
Сообщений: 14

вместо
$('#select_model').change(function(){


написал
$('#cars').on('change', '#select_model', function(){
не работает вообще

если пишу так
$(document).on('change', '#select_model', function(){

начинает тормозить(также как и при подключении файла скрипта к search.php)

Последний раз редактировалось graf_vorontsov, 23.07.2019 в 13:06.
Ответить с цитированием
  #7 (permalink)  
Старый 23.07.2019, 13:06
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от graf_vorontsov
если не подключить его в search.php то вообще не видит
А зачем он ему нужен? У вас индексный файл обращается асинхронными запросами к search.php. И потом, три запроса разнятся только именем ключа и небольшим расхождением в обработке запроса. Следовательно на клиенте может быть один обработчик для трех списков, а на сервере достаточно либо switch(key($_POST)), либо массива с двумя анонимными функциями. Хотя и на сервере практически одно и тоже выполняется.

Последний раз редактировалось laimas, 23.07.2019 в 13:21.
Ответить с цитированием
  #8 (permalink)  
Старый 23.07.2019, 14:13
Интересующийся
Отправить личное сообщение для graf_vorontsov Посмотреть профиль Найти все сообщения от graf_vorontsov
 
Регистрация: 13.06.2017
Сообщений: 14

Сообщение от laimas Посмотреть сообщение
А зачем он ему нужен? У вас индексный файл обращается асинхронными запросами к search.php. И потом, три запроса разнятся только именем ключа и небольшим расхождением в обработке запроса. Следовательно на клиенте может быть один обработчик для трех списков, а на сервере достаточно либо switch(key($_POST)), либо массива с двумя анонимными функциями. Хотя и на сервере практически одно и тоже выполняется.
да... не знаю, зачем, но не работает без подключения.
дайте пример пожалуйста что вы имеете ввиду. как не надо сделать.
Ответить с цитированием
  #9 (permalink)  
Старый 23.07.2019, 14:26
Интересующийся
Отправить личное сообщение для graf_vorontsov Посмотреть профиль Найти все сообщения от graf_vorontsov
 
Регистрация: 13.06.2017
Сообщений: 14

сделал во всех трёх случаях
$(document).on('change',

теперь работает без тормозов и видит прекрасно без непосредственного подключения в файл search.php

$(document).ready(function(){
	
	$(document).on('change', '#select_marka', 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' );
			}
		)
			
	});
	
	$(document).on('change', '#select_model', function(){
		$.post(
			'php/search.php',
			{ model_id:$('#select_model').val()},
			function(res){
				$('#cars').html(res);
				$('#search-result').empty();
				$('#msg').empty();
			}
		)
	});
	
	$(document).on('change', '#select_car', function(){
		$.post(
			'php/search.php',
			{ car_id:$('#select_car').val()},
			function(res){
				$('#info').html(res);
				PCL_TooltipUpdate();
				$('#search-result').empty();
				$('#msg').empty();
			}
		)
	});
});


правильно сделал? или плохо будет работать?

помогите упростить код с помощь switch
Ответить с цитированием
  #10 (permalink)  
Старый 23.07.2019, 14:27
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от graf_vorontsov
не работает без подключения
Если бы после первого запроса было перенаправление на search.php после чего запросы были бы уже с этой страницы, тогда js-сценарий нужно было подключать и на search.php. У вас же этот адрес возвращает html-код списков на ajax запросы. Причем тут может быть JS? Чего-то у вас напутано донельзя.

Ваши списки должны быть зависимы?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перевести код html в js Jolly Общие вопросы Javascript 5 11.08.2018 20:43
js код в в закладке браузера zatrahalisrgistraciyami Общие вопросы Javascript 3 07.08.2018 08:14
JS Cookies, код попап-окна user7143 Общие вопросы Javascript 5 31.07.2018 16:32
Помогите вынести js в отдельный скрипт pozitiv4ek Events/DOM/Window 9 15.01.2018 10:48
Большой JS файл. Кэш IE6. deadpsh Общие вопросы Javascript 1 26.11.2008 23:38