Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.08.2013, 10:18
Аватар для Viral
Профессор
Отправить личное сообщение для Viral Посмотреть профиль Найти все сообщения от Viral
 
Регистрация: 26.04.2011
Сообщений: 472

setInterval... туда и обратно...
Здравствуйте!
Долго и упорно упорото использовал jQuery и тут вдруг где-то замкнуло и захотелось перейти на чистый JS.
Это наверное от того, что курить бросил

Вместо .animate() пробую использовать setInterval и столкнулся с небольшой проблемой...
Скроллю документ посредством setInterval и scrollBy(y,x) при клике по меню навигации.
Однако если до того, как setInterval отработал кликнуть по другой кнопке, т.е. запустить ту же функцию, но с несколько другими данными, на экране происходит полнейшая бредятина.

Подскажите, пожалуйста, как необходимо доработать скрипт:


function iTryScroll(ID){
var anchor = document.getElementById('anchor-'+ID+'');
var spx = document.body.scrollTop;
var fpx = getOffset(anchor); //тут отдельная функция возвращает позицию элемента относительно начала документа
clearInterval(scroll);//я вроде и сбрасываю setInterval - а все равно какая-то лажа получается
  if(spx < fpx){//если мы сейчас выше якоря
    var scroll = setInterval(
      function(){
        if ((spx + 20) <= fpx ){
          window.scrollBy(0,20);
          spx = spx + 20;
        }else if((fpx - spx) != 0){
          window.scrollBy(0,(fpx - spx));
          spx = spx + (fpx - spx);
        }else{
          clearInterval(scroll);//останавливаем скроллинг при достижении цели
        }
      }
    ,1);
  }
  if(spx > fpx){// если мы сейчас ниже якоря
    var scroll = setInterval(
      function(){
        if ((spx - 20) >= fpx ){
          window.scrollBy(0,-20);
          spx = spx - 20;
        }else if((spx - fpx) != 0){
          window.scrollBy(0,-(spx - fpx));
          spx = spx + (fpx - spx);
        }else{
          clearInterval(scroll);//останавливаем скроллинг при достижении цели
        }
      }
    ,1);            
  }
}

Последний раз редактировалось Viral, 05.08.2013 в 10:20.
Ответить с цитированием
  #2 (permalink)  
Старый 05.08.2013, 10:21
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Viral,
http://learn.javascript.ru/js-animation
http://learn.javascript.ru/css-animation
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #3 (permalink)  
Старый 05.08.2013, 10:29
Аватар для Viral
Профессор
Отправить личное сообщение для Viral Посмотреть профиль Найти все сообщения от Viral
 
Регистрация: 26.04.2011
Сообщений: 472

cyber,
спасибо, но транзишн не подходит, т.к. со скроллом он мне не поможет...
а по первой ссылке нет ничего о том, как остановить анимацию и запустить ее с другими параметрами. Разве что в комментариях кто-то рекомендовал использовать clearInterval... но я тоже пробовал - не помогло
Ответить с цитированием
  #4 (permalink)  
Старый 05.08.2013, 11:18
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Viral,
суть первой ссылке была показать как в общем ее делать, и после прочтения можно догадаться.
Я к тому что используйте функцию animate которая дается в примере http://learn.javascript.ru/js-animation#итого

Насчет вашего когда, зачем очищать если таймера еще нет
var spx = document.body.scrollTop;
var fpx = getOffset(anchor); //тут отдельная функция возвращает позицию элемента относительно начала документа
clearInterval(scroll);//я вроде и сбрасываю setInterval - а все равно какая-то лажа получается


А теперь представьте у вас есть 2 функции (А и Б) и у каждой есть таймер, мы запустили функцию А и функцию Б , до того как отработал таймер из А, получается что работает таймер из А и Б.
А в общем вот более правильное решение
<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>

    <script>

      var toElem;
      
      for(var i = 0; i < 1000; i++){
       
         document.write(i+'<br>');
        
        if(i == 700)
          document.write('<div id="scroll"> to me</div>');
      }
      
      
      toElem = document.getElementById('scroll');
      
      
      document.body.addEventListener('click', function () {
      
        
       var coords = toElem.getBoundingClientRect()
    
      
       AnimateScroll(coords.top, 100);
       
      });


      (function () {
       
        var isAnimate;
       
        window.AnimateScroll = function (y, step) {
        
          var offset = 0;
          
          if(isAnimate)
             return;
         
         
          isAnimate = true;
         
          (function animate() {
            
             if(offset >= y){
              
              offset = y;
              isAnimate = false;
              
              
            }
          
            
            window.scrollTo(0, offset);
            
            console.log(offset);
            
           
            
            offset += step;
          
            if(isAnimate)
            setTimeout(animate, 40);
          
          
          }())
        
          
        
        }
      
      
      
      
      }());
      
      

    </script>

  </body>
</html>

а дальше можете расширить, допустим если уже идет анимация, то записывать следующие вызовы в очередь пока не закончиться анимация,
очередь - это массив который содержит объект со свойствами x and step (в данном случае)
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.

Последний раз редактировалось cyber, 05.08.2013 в 11:24.
Ответить с цитированием
  #5 (permalink)  
Старый 05.08.2013, 11:34
Аватар для Viral
Профессор
Отправить личное сообщение для Viral Посмотреть профиль Найти все сообщения от Viral
 
Регистрация: 26.04.2011
Сообщений: 472

cyber,
Исчерпывающе.
Благодарю.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
динамическйи таймер в setInterval ? Arramis Общие вопросы Javascript 15 24.07.2013 19:19
Предложение представить код с setInterval для n - но более двух DOM-єлементов JavaScriptProgrammer Events/DOM/Window 1 09.11.2012 08:09
setInterval и глобальные переменные Почемучкин Events/DOM/Window 11 11.08.2012 14:44
setTimeout setInterval и др. mycoding Общие вопросы Javascript 6 28.10.2010 17:26
Проблема в document.write при использовании setInterval() GOll Общие вопросы Javascript 21 06.10.2008 17:38