о этот setTimeout x_x
Доброго времени суток уважаемые форумчане!
Вот уже как день мучаюсь с этой триклятой функцией! Имеется такой код(сокращённо):
response=response-0;
obj_p1=document.getElementById('l1'+idCell);
obj_p2=document.getElementById('l2'+idCell);
while (response>=idCell) {
i2=1;
sl=parseInt(obj_p1.style.left);
function rist() {
obj_p1.style.left=sl+i2+'px';
obj_p2.style.left=sl+i2+'px';
i2=i2+2;
if (i2 < 300) {
setTimeout(rist,0);
} }
rist();
idCell++;
obj_p1=document.getElementById('l1'+idCell);
obj_p2=document.getElementById('l2'+idCell);
}
Ну и естественно setTimeout проходит только один раз, второй оборот цикла уже не выполняется! Уверен на 90% что всё дело в синтаксисе, но промучавшись 2 дня с всевозможными комбинациями '," и + ни к чему не пришёл! Прошу помочь, спасибо. PS: До этого имел дело с этой функцией, и пока не привёл строчку к виду ниже, так же выполнялся прогон только один раз. Но тут вызов рекурсивный, и как это всё оформить просто не представляю(((
setTimeout("if (document.getElementById('"+trList2[i].id+"')) document.getElementById('"+trList2[i].id+"').style.display='none'",3000);
|
Romeo, Попробуйте так запустить
var Cicl=0;
response=response-0;
obj_p1=document.getElementById('l1'+idCell);
obj_p2=document.getElementById('l2'+idCell);
while (response>=idCell) {
i2=1;
sl=parseInt(obj_p1.style.left);
function rist() {
obj_p1.style.left=sl+i2+'px';
obj_p2.style.left=sl+i2+'px';
i2=i2+2;
if (i2 < 300) {Cicl++;
if(Cicl%100==0){alert('ещё сотня i2='+i2)}
setTimeout(rist,0);
}}
rist();
idCell++;
obj_p1=document.getElementById('l1'+idCell);
obj_p2=document.getElementById('l2'+idCell);
}
|
нет, не работает...
а в чём суть изменений? они же никак не влияют на ход выполнения функции. Говорю же, дело в синтаксисе... |
Romeo,
1. Выньте всю внутренность функции Поставьте alert внутрь - вызов то есть ? (Мож до него и не доходит - портицо раньше |
дак я же сказал что одна итерация только проходит.
я привёл в PS пример строчки. Пока кавычки не расставил как там, тоже, один раз только функция выполнялась, тоже кстати вызывалась из цикла. |
Цитата:
|
Здесь экстрасенсов мало, приведите нормальное описание того, что хотите получить в итоге и полный пример (по сути проблемы), на котором можно будет испытать.
PS: сразу можно сказать, что объявлять в цикле функцию не есть гуд |
Цитата:
ну а как по другому сделать, если не есть гуд? никак... нужно просто расставить правильно кавычки. Цитата:
|
Цитата:
|
Вложений: 1
Цитата:
вот полный код и скриншот. При клике на стрелочку "вправо", все дивы что справа и включая этот див сдвигаются вправо. Каждый столбец разбит на 2 дива, вверхний(l1) и нижний (l2).
function linesdvig(idCell) //передаётся номер столбца
{
new Ajax.Request('sdvig.php', { //кол-во столбцов +1
parameters: {pam:2},
onSuccess: function(transport){
var response = transport.responseText || "ничего не передано"; //возвращается сколько столбцов всего
response=response-0;
newline(idCell); //здесь рисует стрелочка t
obj_p1=document.getElementById('l1'+idCell);
obj_p2=document.getElementById('l2'+idCell);
while (response>=idCell) {
i2=1;
sl=parseInt(obj_p1.style.left);
function rist() {
obj_p1.style.left=sl+i2+'px';
obj_p2.style.left=sl+i2+'px';
i2=i2+2;
if (i2 < 300) {setTimeout(rist,0);
} }
rist();
linepos=idCell+1;
obj_p1.id = "l1"+linepos;
obj_p1.setAttribute('onmouseout','javascript: nodisp(id)');
obj_p1.setAttribute('onmouseover','javascript: disp(id)');
var newimg1=document.createElement('img');
newimg1.setAttribute('move_this', false);
newimg1.style.display="none";
newimg1.style.position="absolute";
newimg1.style.bottom='-3px';
newimg1.title="Удалить линию";
newimg1.style.right='0px';
newimg1.src='image/del.png';
newimg1.setAttribute('onclick','javascript: closeline('+linepos+')');
newimg1.setAttribute('onmouseout','javascript: onsetimgl('+linepos+')');
newimg1.setAttribute('onmouseover','javascript: setimgl('+linepos+')');
newimg1.id='imgl'+linepos;
var newimg2=document.createElement('img');
newimg2.setAttribute('move_this', false);
newimg2.style.display="none";
newimg2.style.position="absolute";
newimg2.style.bottom='-3px';
newimg2.style.left='60px';
newimg2.title="Добавить новый блок на "+linepos+" линию";
newimg2.src='image/add.png';
newimg2.setAttribute('onclick','javascript: setupMessageButton('+linepos+')');
newimg2.setAttribute('onmouseout','javascript: onsetimga('+linepos+')');
newimg2.setAttribute('onmouseover','javascript: setimga('+linepos+')');
newimg2.id='imga'+linepos;
var newimg3=document.createElement('img');
newimg3.setAttribute('move_this', false);
newimg3.style.display="none";
newimg3.style.position="absolute";
newimg3.style.bottom='-3px';
newimg3.style.left='80px';
newimg3.title="Добавить новую линию на "+linepos+" позицию";
newimg3.src='image/sdvig.png';
newimg3.setAttribute('onclick','javascript: linesdvig('+linepos+')');
newimg3.setAttribute('onmouseout','javascript: onsetimgs('+linepos+')');
newimg3.setAttribute('onmouseover','javascript: setimgs('+linepos+')');
newimg3.id='imgs'+linepos;
var text = '<br> день '+linepos;
obj_p1.innerHTML=text;
obj_p1.appendChild(newimg1);
obj_p1.appendChild(newimg2);
obj_p1.appendChild(newimg3);
obj_p2.setAttribute('name',linepos);
obj_p2.id = "l2"+linepos;
idCell++;
obj_p1=document.getElementById('l1'+idCell);
obj_p2=document.getElementById('l2'+idCell);
}
},
onFailure: function(){ alert('Что-то пошло не так...') },
});
}
PS: C вложением вообще беда... почему то сжимает картинку, хотя по разрешенным параметрам ничего не нарушается. |
Да, скриншот мелковат, так получается чего или нет? Посоветованный пример посмотрели?
PS: javascript: в обработчиках уже устарело, поэтому не нужно функцию rist вынести за пределы цикла |
<style>
div {
border: solid 1px;
width: 50px;
height: 50px;
}
</style>
<div id="div" style="position: absolute; top: 0px; left: 0px; border: none; ">
<button>click</button>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</div>
<script>
window.onload = function () {
var div = document.getElementById('div');
var but = div.children[0];
but.onclick = function () {
var count = 200;
var step = 6;
var coof = 1;
var goLeft = function (elem) {
elem.style.left = parseInt(elem.style.left) + step;
}
for (var i = 0; i < count; i += step) {
setTimeout(function () {goLeft(div)}, i*coof);
}
}
}
</script>
|
причём тут это? Ваш код передвигает весь родителський див с потомками, а не набор определённых дивов внутри...
не то всё это( |
Цитата:
если бы вместо setTimeout(rist,0); написали бы rist()- была бы рекурсия |
Цитата:
|
Romeo,
Длинный код - жарко - лучше дебажить или с готовой странички или минималистический код с HTML работающий в топике и демонстрирующий проблему... Просто подобная задача была вчера - полторы штуки - а тут бесплатно и напрягайся, |
Цитата:
|
готовый скрипт с нуля я и сам написать могу, я лишь только попросил расставить правильно кавычки в первом сообщении)
ладно, сейчас попробую переделать вашу функцию... посмотрим что получиться) спасибо. |
вот, сделал :)
Всем огромное спасибо, и отдельно Бесу за пример скрипта который я переделал)
<style>
div div {
border: solid 1px;
width: 50px;
height: 50px;
}
</style>
<div style="position: relative; top: 0px; left: 0px;">
<div onclick="qwe(id)" style="position: absolute; top: 0px; left: 0px;" id="1">div1</div>
<div onclick="qwe(id)" style="position: absolute; top: 50px; left: 0px;" id="2">div2</div>
<div onclick="qwe(id)" style="position: absolute; top: 100px; left: 0px;" id="3">div3</div>
<div onclick="qwe(id)" style="position: absolute; top: 150px; left: 0px;" id="4">div4</div>
</div>
<script>
function qwe(id)
{
var count = 200;
var step = 6;
var coof = 1;
for (var j = id; j < 5; j++) {
for (var i = 0; i < count; i += step) {
setTimeout("document.getElementById('"+j+"').style.left = parseInt(document.getElementById('"+j+"').style.left) + parseInt('"+step+"')",i*step);
}
}
}
</script>
|
Можно так (хотя при быстрых кликах не будет точности)
<style>
#div div {
position: absolute;
border: solid 1px;
width: 50px;
height: 50px;
}
</style>
<div id="div">
<div style="left: 0px; top: 0px">div1</div>
<div style="left: 0px; top: 50px;">div2</div>
<div style="left: 0px; top: 100px;">div3</div>
<div style="left: 0px; top: 150px">div4</div>
</div>
<script>
window.onload = function () {
var div = document.getElementById('div');
var divs = div.children;
var len = divs.length;
var count = 200;
var step = 6;
var coof = 1;
var mas;
function goRight(mas) {
var len = mas.length;
for (var i = 0; i < len; i++) {
mas[i].style.left = parseInt(mas[i].style.left) + step;
}
}
div.onclick = function (e) {
e = e || event;
var target = e.target || e.srcElement;
mas = [];
for (var i = 0; i < len; i++) {
if (target == divs[i]) {
for (var j = i; j < len; j++) {
mas.push(divs[j]);
}
break;
}
}
for (var i = 0; i < count; i += step) {
setTimeout(function () {goRight(mas)}, i*step);
}
}
}
</script>
|
ну, я же не только дивы буду перемещать, там канвасы ещё перерисоватывать, и прочее... для моей задачи решение всё же первое больше подходит... да и попроще оно вроде)))
|
Цитата:
|
я потом дам ссылку на готовый проект)
там просто к БД привязка ещё идёт, так что id необходимы) |
| Часовой пояс GMT +3, время: 04:58. |