Почему не изменяется переменная?

Question

[lemonlimelike]

Всем привет. Почему не изменяется переменная? Смотрел пару примеров кода, так там также делали и у них все работало, а тут не работает, почему? после axios вывожу что в count, так в ней всегда лежит Значение 24, почему оно не меняется?

И еще один вопрос, почему такая запись не правильная?


Код:

window.onscroll = function(){
	var scrollTop=document.documentElement.scrollTop;
	var scrollHeight=document.documentElement.scrollHeight;
    var clientHeight=document.documentElement.clientHeight;
    var result = scrollHeight - clientHeight;

    if(scrollTop == result){
    	var count = 24;
    	axios.post('api/ajax',{
    		count: count
    	}).then((response) =>{
    		count = count + 24;
    		var html = '';
    		var result = document.querySelector('.box__content');
    		response.data.films.forEach((item)=>{
    			html += '<div class="content">'+
		    				'<a href="movie/'+item.name_eu+'/'+item.type+'/'+item.id+'" title="'+item.name_ru+'">'+
		    					'<div class="content__img">'+
		    						'<img src="'+item.thumbnail+'" alt="'+item.name_ru+'">'+
		    					'</div>'+
		    					'<div class="content__box">'+
		    						'<div class="content__box__name">'+
			    						'<b>'+item.name_ru+'</b>'+
			    						'/'+
			    						'<i>'+item.name_eu+'</i>'+
			    					'</div>'+
			    					'<div class="content__box__down">'+
			    						'<div class="content__box__down__right">'+
			    							'просмотров: '+item.views+''+
			    						'</div>'+
			    						'<div class="content__box__down__left">'+
			    							'рейтинг: '+item.rating+''+
			    						'</div>'+
			    					'</div>'+
			    				'</div>'+
			    			'</a>'+
			    		'</div>';
    		});
    		result.innerHTML += html;
    	}).catch((error) =>{
    		console.log(error.response);
    	});
    	console.log(count)
    }
}

Comments

[in some]

1) А вы уверены, что у вас отрабатывает callback в then ?
2) Не нравится потому-что такой код читать и поддерживать сложно, лучше используйте шаблонные строки

[lemonlimelike]

in some, Срабатывает, все срабатывает, кроме того, что не изменяется значение count

[lemonlimelike]

in some, Шаблонные строки?

[alex]

lemonlimelike,
>после axios вывожу что в count

Где выводите? Где код? Вы 80 вопросов задали по js, неужели ещё не научились делать это правильно?

>так в ней всегда лежит Значение 24

Т.к. кода нет, то можно только по-телепатить что это изза асинхронного кода.

[lemonlimelike]

Alex, Поставил код

[in some]

lemonlimelike, https://developer.mozilla.org/ru/docs/Web/JavaScri...

Answer 1

[alex]

>так в ней всегда лежит Значение 24

у вас код асинхронный, вы выводите переменную в консоль раньше, чем ее изменяете в коллбэке аксиоса. можно заюзать замыкание:

window.onscroll = (function(){
  var count = 24;
  
  return function() {
    var scrollTop=document.documentEle...
    ...
    ...
    ...
  }
})();

>почему такая запись не правильная?

правильная

Comments

[lemonlimelike]

>у вас код асинхронный, вы выводите переменную в консоль раньше, чем ее изменяете в коллбэке аксиоса

А как сделать правильно? Чтоб работало? Подскажите, что делать

[alex]

lemonlimelike, async/await, но в данном случае это будет костыль. Где и для чего вам нужна переменная count?

[lemonlimelike]

Alex, переменная count нужна для ajax запроса, вначале я вывожу 24 записи, затем когда пользователь прокрутил до конца страницы, я вызывая ajax запрос, который достает следующие 24 записи, то есть count увеличивается на 24 с каждым запросом и выводит нужные данные, но count не увеличивается и приходят те де данные

[alex]

lemonlimelike, ну она и не должна обновляться. можно использовать замыкание. обновил ответ

[Александр Косицын]

Я бы вынес count куда нибудь во внешний код. А для того чтобы изменить count можно создать функцию incrementCount , которая будет принимать значения 24 , можно и другое если нужно. И эта функция будет изменять значение во внешнем коде через замыкание.
Так у вас count постоянно 24 будет. И будет постоянно создаваться на событие onscroll

[lemonlimelike]

Alex, Хорошо, я сделал так, в конце замыкания вывожу в консоль count, все выводится. НО теперь не выводятся пришедшие данные в блок .box__content. Почему?
Главное то, что значения из count увеличивается, но в консоли срабатывает console.log(error.response)

Вообщем возвращается и error.response, но undefined и console.log(response) с ответом от сервера, то есть массив данных, но они не отображются в блоке .box__content

[alex]

lemonlimelike, код покажите

[lemonlimelike]

Alex,

window.onscroll = (function(){
	var count = 24;
	return function(){
		var scrollTop=document.documentElement.scrollTop;
		var scrollHeight=document.documentElement.scrollHeight;
	    var clientHeight=document.documentElement.clientHeight;
	    var result = scrollHeight - clientHeight;

	    if(scrollTop == result){
	    	axios.post('api/ajax',{
	    		count: count
	    	}).then((response) =>{
	    		console.log('Все правильно: '+ response);
	    		count = count + 24;
	    		var html = '';
	    		var result = document.querySelector('.box__content');
	    		response.data.films.forEach((item)=>{
	    			html += '<div class="content">'+
			    				'<a href="movie/'+item.name_eu+'/'+item.type+'/'+item.id+'" title="'+item.name_ru+'">'+
			    					'<div class="content__img">'+
			    						'<img src="'+item.thumbnail+'" alt="'+item.name_ru+'">'+
			    					'</div>'+
			    					'<div class="content__box">'+
			    						'<div class="content__box__name">'+
				    						'<b>'+item.name_ru+'</b>'+
				    						'/'+
				    						'<i>'+item.name_eu+'</i>'+
				    					'</div>'+
				    					'<div class="content__box__down">'+
				    						'<div class="content__box__down__right">'+
				    							'просмотров: '+item.views+''+
				    						'</div>'+
				    						'<div class="content__box__down__left">'+
				    							'рейтинг: '+item.rating+''+
				    						'</div>'+
				    					'</div>'+
				    				'</div>'+
				    			'</a>'+
				    		'</div>';
	    		});
	    		result.innerHTML += html;
	    	}).catch((error) =>{
	    		console.log('Ошибка: '+error.response);
	    	});
	    	console.log(count)
	    }
	}
})();