Форум

Faab · #1 (**permalink**) 18.11.2013, 16:47

Пытаюсь запустить таймер, перед тем как сработает функция fSetTimeoutRemove().

setTimeout(fSetTimeoutRemove(eLineF1, 500, 0, 1000, startF1), 10000);

Но вышеуказанная функция срабатывает сразу же, без задержки. И выходит сообщение об ошибке: Error: useless setTimeout call (missing quotes around argument?)

ksa · #2 (**permalink**) 18.11.2013, 16:53

Сообщение от Faab

setTimeout(fSetTimeoutRemove(eLineF1, 500, 0, 1000, startF1), 10000);

Х/з, что там делает у тебя функция fSetTimeoutRemove()... Но пробуй написать так

setTimeout(
   function (){
      fSetTimeoutRemove(eLineF1, 500, 0, 1000, startF1);
   }, 
   10000
);

Faab · #3 (**permalink**) 18.11.2013, 18:01

Что-то я не понимаю. Я сейчас выложу два скрипта, не обращайте на длину скрипта. Я укажу на что обратить внимание.

Вот что было до того, как создал этот топик:

<!DOCTYPE HTML>
<html>
<head>
<title>test.com</title>
<style type="text/css">
  div#example {
    display: inline-block;
    width: 500px;
    height: 30px;
    background-color: white;
    border: 2px black solid;
    position: absolute;
  }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

function delta(progress) {
  return progress;
};

function fCreateLine(mainElement, positionHorizontale, positionVerticale){
  var eLineInside = document.createElement('div');
  eLineInside.style.position = "absolute";
  mainElement.appendChild(eLineInside);
  
  eLineInside.style.top = positionVerticale + "px";
  eLineInside.style.left = positionHorizontale + "px";
  //alert(eLineInside.style.top);
  eLineInside.style.height = "2px";
  eLineInside.style.width = "2px";
  return eLineInside;
  
}

function fSetTimeoutCreate(eLineF1, fromF1, toF1, durationF1, startF1){
  setTimeout(function() {
      var now = (new Date().getTime()) - startF1; // Текущее время
      var progress = now / durationF1; // Прогресс анимации
  
      var result = (toF1 - fromF1) * delta(progress) + fromF1;
  
      eLineF1.style.width = result + "px";
      if(result>250){
        eLineF1.style.backgroundColor = 'red';
      }else{
        eLineF1.style.backgroundColor = 'green';
      };
      
      if (progress < 1){
        setTimeout(arguments.callee, 5);
      }else{
        startF1 = new Date().getTime();
        /*
        setTimeout(
          function (){
            fSetTimeoutRemove(eLineF1, 500, 0 , 1000, startF1);
          }, 
          1000
        );
        */
        
        setTimeout(fSetTimeoutRemove(eLineF1, 500, 0, 1000, startF1), 10000);
      };
          
    }, 5);
};

function fSetTimeoutRemove(eLineF2, fromF2, toF2, durationF2, startF2){
 //alert('f2 started');

  setTimeout(function() {
      var now = (new Date().getTime()) - startF2; // Текущее время
      var progress = now / durationF2; // Прогресс анимации
      //alert(progress);
      var result = (toF2 - fromF2) * delta(progress) + fromF2;
  
      eLineF2.style.width = result + "px";
      // alert(result);
      if(result>250){
        eLineF2.style.backgroundColor = 'red';
      }else{
        eLineF2.style.backgroundColor = 'green';
      };
      
      if (progress < 1){
        setTimeout(arguments.callee, 15);
      }else{
        //eLineF2.remove();
      };
          
    }, 15);
};

$(document).ready(function(){
  $('#example').click(function(){
    var element = document.getElementById("example");
    eLine = fCreateLine(element, 0, 15);
    var from = 0; // Начальная координата X
    var to = 500; // Конечная координата X
    var duration = 1000; // Длительность - 1 секунда
    var start = new Date().getTime(); // Время старта
    fSetTimeoutCreate(eLine, 0, 500, 1000, start);
  });
});
</script>
</head>

<body>
<div id="example"></div>
</body>
</html>

Проблема с задержкой. Я заменяю строку 89, как советовали, и вообще ступор:

<!DOCTYPE HTML>
<html>
<head>
<title>test.com</title>
<style type="text/css">
  div#example {
    display: inline-block;
    width: 500px;
    height: 30px;
    background-color: white;
    border: 2px black solid;
    position: absolute;
  }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

function delta(progress) {
  return progress;
};

function fCreateLine(mainElement, positionHorizontale, positionVerticale){
  var eLineInside = document.createElement('div');
  eLineInside.style.position = "absolute";
  mainElement.appendChild(eLineInside);
  
  eLineInside.style.top = positionVerticale + "px";
  eLineInside.style.left = positionHorizontale + "px";
  //alert(eLineInside.style.top);
  eLineInside.style.height = "2px";
  eLineInside.style.width = "2px";
  return eLineInside;
  
}

function fSetTimeoutCreate(eLineF1, fromF1, toF1, durationF1, startF1){
  setTimeout(function() {
      var now = (new Date().getTime()) - startF1; // Текущее время
      var progress = now / durationF1; // Прогресс анимации
  
      var result = (toF1 - fromF1) * delta(progress) + fromF1;
  
      eLineF1.style.width = result + "px";
      if(result>250){
        eLineF1.style.backgroundColor = 'red';
      }else{
        eLineF1.style.backgroundColor = 'green';
      };
      
      if (progress < 1){
        setTimeout(arguments.callee, 5);
      }else{
        startF1 = new Date().getTime();
        
        setTimeout(
          function (){
            fSetTimeoutRemove(eLineF1, 500, 0 , 1000, startF1);
          }, 
          1000
        );
        
        // setTimeout(fSetTimeoutRemove(eLineF1, 500, 0, 1000, startF1), 10000);
      };
          
    }, 5);
};

function fSetTimeoutRemove(eLineF2, fromF2, toF2, durationF2, startF2){
 alert('f2 started');

  setTimeout(function() {
      var now = (new Date().getTime()) - startF2; // Текущее время
      var progress = now / durationF2; // Прогресс анимации
      //alert(progress);
      var result = (toF2 - fromF2) * delta(progress) + fromF2;
  
      eLineF2.style.width = result + "px";
      // alert(result);
      if(result>250){
        eLineF2.style.backgroundColor = 'red';
      }else{
        eLineF2.style.backgroundColor = 'green';
      };
      
      if (progress < 1){
        setTimeout(arguments.callee, 15);
      }else{
        //eLineF2.remove();
      };
          
    }, 15);
};

$(document).ready(function(){
  $('#example').click(function(){
    var element = document.getElementById("example");
    eLine = fCreateLine(element, 0, 15);
    var from = 0; // Начальная координата X
    var to = 500; // Конечная координата X
    var duration = 1000; // Длительность - 1 секунда
    var start = new Date().getTime(); // Время старта
    fSetTimeoutCreate(eLine, 0, 500, 1000, start);
  });
});
</script>
</head>

<body>
<div id="example"></div>
</body>
</html>

Вторая функция теперь вызывается вовремя, но формула таймера выдаёт уже совсем не те цифры:

var result = (toF2 - fromF2) * delta(progress) + fromF2;

ksa · #4 (**permalink**) 19.11.2013, 09:02

Сообщение от Faab

но формула таймера выдаёт уже совсем не те цифры

Так функция запустится с последними значениями переменных, которые указаны ей как параметры.

А к тому времени возможно они изменились...

Для запуска с нужными значениями нужно использовать замыкание. Нечто такое...

setTimeout(
	(function (N,M) {
		return function (){
			fSetTimeoutRemove(N, 500, 0, 1000, M);
		}
	})(eLineF1,startF1)
	, 
	10000
);

Faab · #5 (**permalink**) 19.11.2013, 12:15

Только что дал локальным переменнам второй функции now, result и progress другие имена (что бы не было случайных пересечений с первой функцией) и всё заработало. Вроде локальные переменные, а всё равно как-то влияли друг на друга.

Ну и, конечно, оба ваших варианта работают теперь отлично:

setTimeout(
        	(function (N,M) {
        		return function (){
        			fSetTimeoutRemove(N, 500, 0, 1000, M);
        		}
        	})(eLineF1,startF1)
        	, 
        	1000
        );

или так

setTimeout(
          function (){
            fSetTimeoutRemove(eLineF1, 500, 0 , 1000, startF1);
          }, 
          1000
        );

Спасибо

ksa · #6 (**permalink**) 19.11.2013, 13:06

Сообщение от Faab

Спасибо

Заходи еще.

Форум

Справочник

Discord чат

Курсы javascript