Javascript "в то время как завис" - PullRequest
Новая
       7

Javascript "в то время как завис"

4 голосов
/ 24 ноября 2010

Может ли кто-нибудь помочь мне в этом ... У меня есть кнопка, которая, когда зависает, запускает действие. Но я бы хотел, чтобы это повторялось до тех пор, пока кнопка зависла.

Буду признателен за любое решение, будь то в jquery или в чистом javascript - вот как выглядит мой код в данный момент (в jquery): 

var scrollingposition = 0;

$('#button').hover(function(){
++scrollingposition;
    $('#object').css("right", scrollingposition);
    });

Теперь, как я могу поместить это в какой-то цикл while, чтобы #object перемещал px на px для кнопки #, находящейся под мышкой, а не только тогда, когда мышь вводит ее?

Ответы [ 5 ]

4 голосов
/ 11 января 2013

ответ Натана - хорошее начало, но вы должны также использовать window.clearInterval , когда мышь покидает элемент ( mouseleave событие), чтобы отменить повторное действие, которое было установлено с помощью setInterval () , потому что таким образом «цикл» выполняется только тогда, когда указатель мыши входит в элемент ( mouseover событие).

Вот пример кода: 

  function doSomethingRepeatedly(){
    // do this repeatedly when hovering the element
  }

  var intervalId;

  $(document).ready(function () {

    $('#myelement').hover(function () {
      var intervalDelay = 10;
      // call doSomethingRepeatedly() function repeatedly with 10ms delay between the function calls
      intervalId = setInterval(doSomethingRepeatedly, intervalDelay);
    }, function () {
      // cancel calling doSomethingRepeatedly() function repeatedly
      clearInterval(intervalId);
    });

  });

Я создал пример кода на jsFiddle, который демонстрирует, как прокрутить фоновое изображение элемента слева направо и затем назад hover с кодом, указанным выше:

http://jsfiddle.net/Sk8erPeter/HLT3J/15/

4 голосов
/ 24 ноября 2010

ОК ... еще один удар по ответу: 

$('myselector').each(function () {
  var hovered = false;
  var loop = window.setInterval(function () {
    if (hovered) {
      // ...
    }
  }, 250);

  $(this).hover(
    function () {
      hovered = true;
    },
    function () {
      hovered = false;
    }
  );
});

250 означает, что задание повторяется каждую четверть секунды.Вы можете уменьшить это число, чтобы ускорить его, или увеличить, чтобы замедлить.

2 голосов
/ 24 ноября 2010

Если это анимация, вы можете "остановить" анимацию на полпути. Похоже, вы перемещаете что-то влево, чтобы вы могли сделать: 

var maxScroll = 9999;
$('#button').hover(
    function(){ $('#object').animate({ "right":maxScroll+"px" }, 10000); },
    function(){ $('#object').stop(); } );
1 голос
/ 24 ноября 2010 
var buttonHovered = false;
$('#button').hover(function () {
  buttonHovered = true;
  while (buttonHovered) {
    ...
  }
},
function () {
  buttonHovered = false;
});

Если вы хотите сделать это для нескольких объектов, возможно, было бы лучше сделать его более ориентированным на объект, чем глобальную переменную.

Редактировать: Подумайтелучший способ работы с несколькими объектами - это поместить его в блок .each (): 

$('myselector').each(function () {
  var hovered = false;
  $(this).hover(function () {
    hovered = true;
    while (hovered) {
      ...
    }
  },
  function () {
    hovered = false;
  });
});

Edit2 : или вы можете сделать это, добавив класс: 

$('selector').hover(function () {
  $(this).addClass('hovered');
  while ($(this).hasClass('hovered')) {
    ...
  }
}, function () {
  $(this).removeClass('hovered');
});
0 голосов
/ 24 ноября 2010 
var scrollingposition = 0;

$('#button').hover(function(){
    var $this = $(this);
    var $obj = $("#object");
    while ( $this.is(":hover") ) {
        scrollingposition += 1;
        $obj.css("right", scrollingposition);
    }
});
...