Форум

qwertyuiopoiuytrewq · #1 (**permalink**) 24.03.2013, 12:16

Замысел, чтобы происходило вот что:

<!DOCTYPE HTML>
<html>
  
  <head></head>
  
  <body>
    <div id='g' style='background:rgb(100,0,0);width:100px; height:100px; position:absolute; top:0px;left:100px;'
    onMouseOver='app()' onMouseOut='disapp()'></div>
    <script>
      var d, c, h = 100,
        el = document.getElementById('g');

      function a() {
        if (h <= 250) {
          h += 5;
          el.style.background = 'rgb(' + h + ',0,0)';
        } else {
          clearInterval(d);
        }
      }

      function b() {
        if (h >= 100) {
          h -= 5;
          el.style.background = 'rgb(' + h + ',0,0)';
        } else {
          clearInterval(c);
        }
      }

      function app() {
        clearInterval(c);
        d = setInterval(a, 10);
      }

      function disapp() {
        clearInterval(d);
        c = setInterval(b, 10);
      }
    </script>
  </body>

</html>

только с несколькими объектами сразу. Проблема в том, что setInterval не может воззвать к функции с аргументом:

<!DOCTYPE HTML>
<html>
  
  <head></head>
  
  <body>
    <div id='g' style='background:rgb(100,100,100);width:100px; height:100px; position:absolute; top:0px;left:100px;'
    onMouseOver='disapp(1)' onMouseOut='app(1)'></div>
    <div id='g' style='background:rgb(100,100,100);width:100px; height:100px; position:absolute; top:100px;left:100px;'
    onMouseOver='disapp(1)' onMouseOut='app(1)'></div>
    <script>
      var d, c, visited = false,
        h = 100;

      alert('a');

      function a(z) {
        alert(z);
        if (h <= 250) {
          h += 5;
          el.style.background = 'rgb(' + h + ',0,0)';
        } else {
          clearInterval(d);
        }
      }

      function b(z) {
        alert(z);
        if (h >= 100) {
          h -= 5;
          el.style.background = 'rgb(' + h + ',0,0)';
        } else {
          clearInterval(c);
        }
      }

      function app(x) {
        clearInterval(c);
        d = setInterval(a(x), 10);
      }

      function disapp(x) {
        clearInterval(d);
        c = setInterval(b(x), 10);
      }
    </script>
  </body>

</html>

Подскажите, что мне делать что бы можно было такое осуществить (не только с RGB/RGBA, это просто пример).
Заранее благодарен

dmitriymar · #2 (**permalink**) 24.03.2013, 12:26

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

Проблема в том, что setInterval не может воззвать к функции с аргументом:

откуда такой вывод? Где написано , что из тайчеров нельзя вызывать функции с аргументами?
http://shamansir.github.com/JavaScri...other.timeouts

danik.js · #3 (**permalink**) 24.03.2013, 12:44

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

откуда такой вывод? Где написано , что из тайчеров нельзя вызывать функции с аргументами?

Нигде не написано, однако IE7-9 не поддерживают это.

function fn(){
    alert(Array.prototype.slice.call(arguments));
}

setTimeout(fn, 100, 'arg1', 'arg2');

Тем не менее, никто не запрещает вызывать функцию без агрументов, которая уже вызовет нужную функцию с аргументами

dmitriymar · #4 (**permalink**) 24.03.2013, 12:47

Сообщение от danik.js

Сообщение от dmitriymar
откуда такой вывод? Где написано , что из тайчеров нельзя вызывать функции с аргументами?
Нигде не написано, однако IE7-9 не поддерживают это.

Добро пожаловать по ссылке http://shamansir.github.com/JavaScri...other.timeouts
использование эвалинья таймаутами
использование функции обёртки

danik.js · #5 (**permalink**) 24.03.2013, 12:52

Ходил по ссылке. Там скукота )
Вот это поинтереснее. К сожалению не работает в старье(не-ES5)

function fn(){
    alert(Array.prototype.slice.call(arguments));
}
 
setTimeout(fn.bind(null, 'arg1', 'arg2'), 100);

qwertyuiopoiuytrewq · #6 (**permalink**) 24.03.2013, 12:56

Спасибо.
Я дурак можно было вызвать с кавычками.
Но.
Допустим я перестарался с количеством функций.
Допустим я это исправил и больше такой надобности нет:

<!DOCTYPE HTML>
<html>
  
  <head></head>
  
  <body>
    <div style='background:rgb(100,100,100);width:100px; height:100px; position:absolute; top:0px;left:100px;'
    onMouseOver='b(this)' onMouseOut='a(this)'></div>
    <div style='background:rgb(100,100,100);width:100px; height:100px; position:absolute; top:110px;left:100px;'
    onMouseOver='b(this)' onMouseOut='a(this)'></div>
    <script>
      var d, c,
        h = 100;

      alert('a');

      function a(el) {
        clearInterval(c);
        d = setInterval(function () {
          if (h <= 250) {
            h += 5;
            el.style.background = 'rgb(' + h + ',0,0)';
          } else {
            clearInterval(d);
          }
        }, 10);
      }

      function b(el) {
        clearInterval(d);
        c = setInterval(function () {
          if (h >= 100) {
            h -= 5;
            el.style.background = 'rgb(' + h + ',0,0)';
          } else {
            clearInterval(c);
          }
        }, 10);
      }

     
    </script>
  </body>

</html>

но что мне делать, если при перемещении курсора с одного блока на другой блок не перекрашивается до конца.
Заранее благодарен.

Форум

Справочник

Discord чат

Курсы javascript