JQuery: предотвращение запуска функции до тех пор, пока другая функция не будет выполнена условно за «X» промежуток времени

0

Я пытаюсь создать сценарий, который, когда я "навешиваю" определенный элемент html с определенным идентификатором id="HighlightCustomerName", что только после того, как он удерживает этот "зависание" в течение 2 или более секунд, функция временно применит класс class="highlighted" элементам HTML с другим классом class="2Bhighlighted".

См. Ниже, это не работает, но я думаю, что это иллюстрирует то, что я пытаюсь сделать:

HTML:

<span id="HighlightCustomerName">John Doe</span>
<span class="2Bhighlighted">John Doe</span>

Jquery:

   $(document).ajaxSuccess(function () {
             $(".#HighlightCustomerName").hover(function () {
                  $(".2Bhighlighted").delay(2000).addclass("highlighting")
             });)
             if ( $(".2Bhighlighted").hasClass("highlighting"))
                  {
                       $(".2Bhighlighted").addClass("highlighted")
                  }
                  else{
                       $(".highlighted").removeclass("highlighted") 
                  }
       });

CSS:

highlighted {bakcground-color: yellow!important;}

Это хороший способ приблизиться к этому? У кого-нибудь есть лучший способ сделать это? Я просто собираюсь

  • 0
    Используйте setTimeout () и clearTimeout ()?
  • 0
    if ( $(".2Bhighlighted").hasClass("highlighting")) Это условие не имеет смысла. Просто $(".highlighted").removeclass("highlighted") - если у него нет класса, он ничего не сделает.
Теги:

4 ответа

0
Лучший ответ

Вы можете использовать css3-переходы и вообще избегать jquery:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Answer</title>
    <script>
        function changeStyle(className, colorName) {
            var element = document.getElementsByClassName(className);
            element[0].style.transition = "background 1.0s linear 2.0s";
            element[0].style.background = colorName;
        }
    </script>
</head>
<body>
    <span id="HighlightCustomerName"
          onmouseover="changeStyle('2Bhighlighted','yellow');"
          onmouseout="changeStyle('2Bhighlighted','white');">John Doe</span>
    <span class="2Bhighlighted">John Doe</span>
</body>
</html>
0
var element = $('#hoverMe');

hoverChange(element, function() {
    element.addClass('red');
});

function hoverChange(element, fn) {

    var timer = null;

    element.mouseenter(function() {
        timer = setTimeout(function() {
            fn();
        }, 2000)
    });

    element.mouseout(function() {
        clearTimeout(timer);        
    });

}

Попробуйте здесь:

http://jsfiddle.net/GwADf/

0
var highlightTimeout;
$("#HighlightCustomerName").hover(function () {
    highlightTimeout=setTimeout(function(){
        $(".2Bhighlighted").addclass("highlighting");
    }, 2000);
}, function(){
   $(".highlighted").removeclass("highlighted"); // no point checking, just remove it
   clearTimeout(highlightTimeout); // this prevents it from happening
}); 

Также обратите внимание на свой селектор .#HighlightCustomerName было неправильным

0

Для этого необходимо установить и очистить таймер:

  • Когда вы начинаете наведение, установите таймер на 2 секунды.
  • Когда вы перестанете зависать, очистите любой таймер, который в данный момент запущен.
  • Если пройдет 2 секунды без остановки, таймер загорится
  • Затем вы можете добавить временный класс.
  • Если вы хотите удалить временный класс через некоторый период времени, выполните еще один setTimeout() для удаления временного класса

Вот код с некоторыми пояснительными комментариями:

var timer;
$("#HighlightCustomerName").hover(function () {
    // if a timer was already running, clear it so we never have multiple ones
    clearTimeout(timer);
    // set a timer for 2 seconds
    timer = setTimeout(function() {
        // we've been hovering for 2 seconds
        // add your class here
        $(".2Bhighlighted").addClass("highlighting");
        // then remove the class 5 seconds later
        setTimeout(function() {
            $(".2Bhighlighted").removeClass("highlighting");
        }, 5000);
    }, 2000);
}, function() {
    // if we stop hovering, clear the timer
    clearTimeout(timer);
});

У вашего кода также был ряд других ошибок:

  1. У вас был селектор ".#HighlightCustomerName" который выглядит неправильно. Вы либо запрашиваете класс с a . или идентификатор с #, но не оба.

  2. Ваша капитализация addClass() и removeClass().

Ещё вопросы

Сообщество Overcoder
Наверх
Меню