Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
0 / 0 / 0
Регистрация: 03.03.2019
Сообщений: 6
1

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

03.03.2019, 15:34. Просмотров 398. Ответов 1


При создании слайдера столкнулся с тем что 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>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
03.03.2019, 15:34
Ответы с готовыми решениями:

Меню работающее на jQuery, не правильно работает
Имеется меню. При щёлканье в нём на каком-нибудь радел. Открывается список ссылок меню. Щёлкая на...

JQuery UI Autocomplete c minLength: 0 не правильно работает
Добрый день. Есть autocomplete прикрученный к input. После события change это поле перезагружается....

Callback animate jquery
Привет друзья! Вопрос такой - почему условие сработает если на момент скролла по клику эта...

This в callback функции jQuery.post
Нужно изменить поля объекта, который вызвал post запрос. Но в функции this указывает на что-то...

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

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

JQuery callback при изменении стиля, Реально ли?
Элементу присваивается стиль, напр. $('.element').css(&quot;color&quot;,&quot;white&quot;); возможно ли сделать...

Как правильно написать callback функцию?
//некий массив для обработки $data = array ( 0 =&gt; array ( 'ID' =&gt; '98', 'portid'...

For_each и аргументы callback-функции; Как передать callback'у больше одного аргумента
Изучаю контейнеры и алгоритмы stl по Майерсу . С непривычки слегка охренел и запутался в них . В...

Не работает метод интерфейса callback
у меня есть &quot;чат&quot;,например 2 пользователя конектяться и становятся онлайн, 2-ой пользователь хочет...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.