2013-08-31 65 views
2

我應如何調用鼠標懸停功能當鼠標懸停在一個HTML元素保持通話的功能,同時鼠標懸停

例子:

<script> 
    function a() { 
     "special code hear" 
    } 
</script> 
<div onmouseover('a()')>&nbsp;</div> 

我怎樣才能保持通話鼠標懸停在div上的函數,而不是一次調用該函數。

+0

使用的setTimeout() –

+0

@FaceOfJock它muste是'的setInterval()' –

+0

您可以使用setInverval時做到這一點當鼠標懸停在外並且清理出來時 –

回答

5

活動不會自動重複。您可以使用計時器在鼠標結束時重複該命令,但不要忘記在onmouseout事件中停止計時器。您需要在函數外部使用變量來跟蹤計時器,以便它可以被取消,這就是爲什麼我們需要單獨聲明var repeater

<script> 
    var repeater; 

    function a() ... 
</script> 

<div onmouseover="repeater=setInterval(a(), 100);" onmouseout="clearInterval(repeater);"></div> 
0

您應該使用這裏setInterval()功能...

它也給你打電話的功能,任何時間間隔你的願望 像功率:setInterval("a()",1000); 這裏的時間是1/1000秒,以便1000指1秒 你可以把這個setInterval函數中的任何函數說b()並調用b()功能從div標籤:

<div onmouseover="b()"> 
+0

對不起,我使用手機輸入,所以不能把它放在正確的格式 –

0
<script type="text/javascript"> 
var tId = null, 
    time = 100; 
$('#test').hover(
    function(event) { 
     tId = setTimeout(function() { 

     }, time); 
    }, 
    function(event) { 
     clearTimeout(tId); 
    } 
) 
</script> 
<div id="test">test</div> 
1

嘗試此FIDDLE

http://jsfiddle.net/C4AVg/

var pee = ''; 
$('#poop').mouseover(function(){ 

       pee = setInterval(function() { 
      // Do something every 5 seconds 
        alert('hi'); 
}, 1000); 
}); 
    $('#poop').mouseout(function() { 
     clearInterval(pee); 
}); 
+0

他沒有使用jQuery –

2

下面是使用setTimeoutDEMO HERE)的一種可能的解決方案,它會反覆每Seconde系列:

HTML代碼:

<div id='div'>test</div> 

JS代碼:

<script> 
document.getElementById('div').onmouseover=function(){a();}; 

function a(){ 

    //some code here 

    setTimeout(a,1000); 

    } 
</script> 
+0

您也可以用以下替換超時行:setTimeout(「a」,1000); – ninty9notout

+0

是的,你是對的,我的代碼現在已經改進了 –

0
// 
// try the timer factory 
// 
function timer (callbacks, delay, fireNTimes) { 

    timer._cb || 
    (timer._cb = function() { return true; }); 

    return (function (callbacks, delay, fireNTimes) { 

     var 
      un, 
      timerState = { 
       'current-count' : 0, 
       'delay'   : Math.abs(parseFloat(delay)) || 1000, 
       'repeat-count' : Math.abs(parseInt(fireNTimes)) || Number.POSITIVE_INFINITY, 
       'running'  : false, 
       'interval'  : un 
      }, 

      callback = { 
       onTimer: callbacks.onTimer || timer._cb, 
       onStart: callbacks.onStart || timer._cb, 
       onStop : callbacks.onStop || timer._cb, 
       onEnd : callbacks.onEnd || timer._cb 
      }; 

     return { 

      ctx: this, 

      startargs: [], 

      start: function (/* callbacks_context, ...params */) { 

       var 
        that = this, 
        args = Array.prototype.slice.call(arguments, 1); 

       (arguments[0] !== un) && (this.ctx = arguments[0]); 
       (args.length != 0) && (this.startargs = args ); 

       this.running() || (
        timerState.running = true, 
        callback.onStart.apply(this.ctx, this.startargs), 
        timerState['current-count'] += 1, 
        callback.onTimer.apply(this.ctx, this.startargs), 
        (timerState['current-count'] == timerState['repeat-count']) && 
         (
         callback.onEnd.apply(this.ctx, this.startargs), 
         (timerState["current-count"] = +(timerState.running = false)), true 
        ) || 
        (timerState.interval = 
         window.setInterval(function() { 
           timerState['current-count'] += 1; 
           callback.onTimer.apply(that.ctx, that.startargs); 
           (timerState['current-count'] == timerState['repeat-count']) && 
           that.reset() && 
           callback.onEnd.apply(that.ctx, that.startargs); 
          }, timerState.delay 
         ) 
        ) 
       ); 
       return this; 
      }, 
      stop: function() { 

       this.running() && 
       (
        window.clearInterval(timerState.interval), 
        timerState.interval = un, 
        timerState.running = false, 
        callback.onStop.apply(this.ctx, this.startargs) 
       ); 
       return this; 
      }, 
      reset: function() { 
       return this.running() && 
       (! (timerState["current-count"] = +(timerState.running = false))) && 
       (window.clearInterval(timerState.interval), true) && 
       ((timerState.interval = un), this); 
      }, 
      currentCount: function() { 
       return timerState['current-count']; 
      }, 
      delay: function() { 
       return timerState.delay; 
      }, 
      repeatCount: function() { 
       return timerState['repeat-count']; 
      }, 
      running: function() { 
       return timerState.running; 
      } 
     }; 

    })(callbacks, delay, fireNTimes); 

} 

var 
    tm = timer(
       { 
       onStart : function() { console.log('start:', 'this === ', this, arguments); }, 
       onTimer : function() { console.log('timer:', 'this === ', this, arguments); }, 
       onEnd : function() { console.log('done:', 'this === ', this, arguments); }, 
       onStop : function() { console.log('pause:', 'this === ', this, arguments); } 
       }, 
       2000 
     ), 
    el = document.getElementById('btn1'), 
    o = { p1:'info' }; 

el.onmouseover = function() { tm.start(el, o); }; 
el.onmouseout = function() { tm.stop(); }; 

// 
// 
// start: this === <button id="btn1"> [Object { p1="info"}] 
// timer: this === <button id="btn1"> [Object { p1="info"}] 
// timer: this === <button id="btn1"> [Object { p1="info"}] 
// timer: this === <button id="btn1"> [Object { p1="info"}] 
// pause: this === <button id="btn1"> [Object { p1="info"}] 
// 
// etc... 
// 
// 
相關問題