Callback работает не правильно jQuery

@Даниил199857 · Регистрация: 03.03.2019

Студворк — интернет-сервис помощи студентам

При создании слайдера столкнулся с тем что callback функция запущенная внутри функции animate() выполняется примерно на 400мс раньше завершения выполнения анимации подскажите пожалуйста в чем может быть причина, то что это так можно убедиться если быстро кликать на одну из кнопок смены слайда. Вот код слайдера(картинки заменил на цветные дивы можете вставить в любой файл index.html будет работать):

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.galery{
max-width: 640; 
min-height: 480px;
position: relative;
margin:0 auto;
}
.photos{
opacity: 1;
position: absolute;
transition: 0.5s;
}
.photos{
position: absolute;
height: 100%;
width: 0;
overflow: hidden;
}
 
.btn_back {
width: 100px;
height: 25px;
margin: 0 auto;
}
 
.btn_next {
width: 100px;
height: 25px;
margin:0 auto;
}
.button_slide{
margin:10 auto;
width:210px;
text-align: center;
}
#foo{
position: absolute; 
left: 0;
background-color: #fff;
}
</style>
</head>
<body>
 
<div id="galery" class="galery">
<div class="photos" style= "background: blue;"></div>
<div class="photos" style= "background: red;"></div>
<div class="photos" style= "background: yellow;"></div>
<div class="photos" style= "background: green;"></div>
<div class="photos" style= "background: orange;"></div>
</div>  
<div class="button_slide">
<button id="btn_back" class="btn_back">назад</button>
<button id="btn_next" class="btn_next">вперед</button>    
</div>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
<script type="text/javascript">
$(function () {
//Создаем класс слайдера
function SlideToggle(obj){
this.photos = obj.photos; //фотографии
this.btnNext = obj.btnNext; //кнопка вперед
this.btnBack = obj.btnBack; //кнопка назад
_this = this; //сохраняем контекст в переменную
var i = 0; //переменная счетчик для переключения слайдов
var photo = $(_this.photos[i]) //получим текущую картинку из обьекта photos с помощью счетчика
photo.css({"width": "100%", "left": "0"}); /*зададим данной картинке размер, при инициализации 
слайдера(остальные картинки массива скрыты в css)*/
var log = false;//создадим переменную прекращающую выполнение функции до выполнения анимации
 
this.btnNext.on("click", function(e) {
if(log){ //если переменная true выйти из функции
console.log(log + " " + "функия не может быть выполнена до окнчания анимации")
return;
}
log = true;/*ставим значение true теперь все последующие клики до выполнения callbeck 
мы будем попадать в эту часть кода if(log){return;} завершающую выполнение функции*/
photo.css({"left": "0","right": "auto"}).animate({width: "0px"},400/*можно более нагядно увидеть
то что callback выполняется на 400мс раньше установив тут 1500 вместо 400*/
, function(){/*запустим анимацию
скрывающую первый видимый элемент и ПОСЛЕ ее выполнения запустим collback*/
/*здесь возникает проблема так как callback выполняется раньше окончания анимации примерно на 
400мс*/
setTimeout(function(){log = false}, 10);/*установив здесь 410 получим желаемый результат 
однако хотелось бы понять причину такого поведения*/
console.log("коллбек сработал");
});
i++;//перейдем к следующей картинке в массиве photos
photo = $(_this.photos[i])//перейдем к следующей картинке в массиве photos при помощи i
if(i > _this.photos.length - 1){/*зациклим наш слайдер,
(если i больше чем кол-во картинок установим i=0)*/
i = 0;
photo = $(_this.photos[i])//получим 0 картинку в нашем массиве
photo.css({"left": "auto", "right": "0"}).animate({width: "100%"},400/*1500*/)//покажем ее
}
else{//если i меньше кол-ва картинок просто зададим след. картинке анимацию
photo.css({"left": "auto", "right": "0"}).animate({width: "100%"},400/*1500*/)
}   
})
/*аналогично работает btnBack только в обратном направлении, возникает такая же проблема c callback - ом*/
this.btnBack.on("click", function() {
if(log){
console.log(log)
return;
}
log = true;
var photo = $(_this.photos[i])
photo.css({"left": "auto","right": "0"}).animate({width: "0px"},400/*1500*/, function(){
setTimeout(function(){log = false}, 10);
console.log("коллбек сработал");
});
i--;
photo = $(_this.photos[i])
if(i < 0){
i = _this.photos.length - 1;
photo = $(_this.photos[i])
photo.css({"rigth": "auto", "left": "0"}).animate({width: "100%"},400/*1500*/)
}
else{
photo.css({"rigth": "auto", "left": "0"}).animate({width: "100%"},400/*1500*/)
}   
})
}
 
var test = new SlideToggle({
photos: $(".photos"),
btnNext: $("#btn_next"),
btnBack: $("#btn_back")
})
 
});
</script>   
</body>
</html>

@Даниил199857 · 05.03.2019, 19:47 **[ТС]**

Сам нашел ответ на вопрос по ошибке забыл удалить из css вот эту часть кода:
.photos{
opacity: 1;
position: absolute;
transition: 0.5s;
}
из за чего анимация выполнялась дольше чем прописано в скрипте

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .

@Даниил199857 0 / 0 / 0 Регистрация: 03.03.2019 Сообщений: 6
	05.03.2019, 19:47 [ТС]
	Сам нашел ответ на вопрос по ошибке забыл удалить из css вот эту часть кода: .photos{ opacity: 1; position: absolute; transition: 0.5s; } из за чего анимация выполнялась дольше чем прописано в скрипте 0