VPF::Оптимизация скрипта - Форум программистов

Onis

Дата 1.9.2009, 20:41 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 241
Регистрация: 18.6.2005
Где: Украина, Николаев

Репутация: 2
Всего: 3

Суть такова, нужна фича, когда пользователь подводит курсор к верхней или нижней части экрана, он начинает прокручиваться в соотвутствующем направлении. Написал скрипт который прикрепляется к onmousemove, вроде всё работает, но неплохо подтормаживает. Я его оптимизировал, оптимизировал но так и не дооптимизировал. Может есть пути по-проще или я что-то делаю не так?

Код


var scrollIntervalId = null;
var scrollInterval = 10;
var scrollTopFunct = function(){window.scrollBy(0, -5);};
var scrollBottomFunct = function(){window.scrollBy(0, 5);};
var isScrolling = false;

function smartScroll(y)
{
    if(y < window.innerHeight - 50 || getBodyScrollTop() <= 0)
    {
        window.clearInterval(scrollIntervalId);
        return;
    }
    if(y > window.innerHeight - 50 && window.innerHeight < template.offsetHeight - getBodyScrollTop())
    {
        if(isScrolling == 'bottom')
            return;
        isScrolling = 'bottom';
        window.clearInterval(scrollIntervalId);
        scrollIntervalId = window.setInterval(scrollBottomFunct, scrollInterval);
    }
    else if(y < 50 && getBodyScrollTop() > 0)
    {
        if(isScrolling == 'top')
            return;
        isScrolling = 'top';
        window.clearInterval(scrollIntervalId);
        scrollIntervalId = window.setInterval(scrollTopFunct, scrollInterval);
    }
    else
    {
        isScrolling = false;
        window.clearInterval(scrollIntervalId);
    }
}

Спасибо.

Amphiluke

Дата 1.9.2009, 22:01 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

Цитата(Onis @ 1.9.2009, 20:41

)

Может есть пути по-проще

Есть, на мой взгляд.

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <title>Template</title>

   <style type="text/css">
      #topLine, #bottomLine {
         height: 15px;
         left: 0px;
         position: fixed;
         width: 100%;
         z-index: 10000;
      }
      #topLine {
         top: 0px;
      }
      #bottomLine {
         bottom: 0px;
      }
   </style>

   <script type="text/javascript">
      var scrollStep = 3; /* шаг прокрутки */
      var scrollRate = 100; /* временной интервал прокрутки */

      var signStep;
      var timeoutId;
      
      function scrollFunc() {
         document.documentElement.scrollTop = document.documentElement.scrollTop + signStep;
      }
      
      function beginScroll(direction) {
         if (timeoutId) return true;
         signStep = (direction == "down") ? scrollStep : -scrollStep;
         timeoutId = window.setInterval(scrollFunc, scrollRate);
      }
      
      function stopScroll() {
         if (timeoutId) window.clearInterval(timeoutId);
         timeoutId = 0;
      }
   </script>
   
</head>

<body>
   <div id="topLine" onmousemove="beginScroll('top');" onmouseout="stopScroll();"></div>
   <div id="bottomLine" onmousemove="beginScroll('down');" onmouseout="stopScroll();"></div>
      
   <!-- Тут много всякого контента... -->

</body>

</html>

Onis

Дата 2.9.2009, 16:07 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 241
Регистрация: 18.6.2005
Где: Украина, Николаев

Репутация: 2
Всего: 3

Насколько я понял у меня примерно тоже самое, но у меня этот метод вызывается каждый раз при mousemove и onscroll. Скорее всего поэтому он и тормозит, только как исправить пока не понял.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »