jQuery! Прокрутка колеса мыши

как ограничить прокрутку колесика мыши только 1-им событием, в моем случае это alert(way)?

Дело в том что когда прокручивается колесо мыши, то происходит сразу несколько alert'ов (событий), можете сами убедиться на этом примере:

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
    var tempScrollTop,currentScrollTop = 0;
   
    var way = "default"; // направление
       
        $(window).scroll(function()
        {
           
            currentScrollTop = $(window).scrollTop();
       
            if (tempScrollTop < currentScrollTop)
           {
               way= "down"; // крутнули вниз колесо
           }
           else if (tempScrollTop > currentScrollTop)
            {
                way= "up"; // крутнули вверх колесо
            }
           
            tempScrollTop = currentScrollTop;
           
            alert(way);
       
        });
   
    });
</script>
</head>
<body>
<style>
body { height: 3000px; }
</style>
</body>
</html>
 


возможно ли как это отрегулировать, чтобы на 1-ну прокрутку срабатывало только 1-но событие, т.е. 1 alert?
0
javascript jquery mousewheel scroll scrolling

1 ответов

С одной стороны вашу задачу можно рассмотреть как создание особого события типа "завершение прокрутки". С другой стороны её можно рассмотреть как троттлинг (throttling), обрубание слишком частых вызовов функции.

Если говорить о втором, то суть заключается в том, что после вызова функции она блокируется на некоторый интервал, в течение которого её вызовы "пустые" или не дают эффекта.
Например, в замечательной либе Underscore есть она: _.throttle. Она принимает функцию и интервал, а возвращает новую функцию, которую можно вызывать не чаще, чем интервал. Если вы так сделаете, то у вас не будет вызываться скролл слишком часто (но он всё равно будет вызываться больше одного раза), возможно, это то, что вам нужно.

В первом случае, мне неизвестно о таком специальном событии, как "завершение скролла". Вы можете запилить его самостоятельно. Что такое "конец скролла"? Это, когда юзер скроллил-скроллил, а потом перестал скроллить. Можете так и сделать: скролл вызывает некоторую функцию, которая постоянно сбрасывает и назначает другую функцию через setTimeout. Если последней удастся выполниться, то мы говорим о том, что произошло событие "завершение скролла".

4