Fatal编程技术网
  • javascript/
  • Javascript 使用jQuery对每个事件突发运行一次函数

Javascript 使用jQuery对每个事件突发运行一次函数

javascript jquery

Javascript 使用jQuery对每个事件突发运行一次函数,javascript,jquery,bind,innerhtml,settimeout,Javascript,Jquery,Bind,Innerhtml,Settimeout,我正在使用jQuery侦听DOMSubtreeModified事件，然后执行一个函数。我需要的是一种每次事件突发只运行一次函数的方法。因此，在本例中，事件将仅在1秒后运行，并在3秒后再次运行。最好的方法是什么？ jQuery $(function(){ setTimeout(function(){ $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test';

我正在使用jQuery侦听DOMSubtreeModified事件，然后执行一个函数。我需要的是一种每次事件突发只运行一次函数的方法。因此，在本例中，事件将仅在1秒后运行，并在3秒后再次运行。最好的方法是什么？

jQuery

$(function(){

    setTimeout(function(){
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
    },1000);

    setTimeout(function(){
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
    },3000);

    $('#container').bind('DOMSubtreeModified',function(){
        console.log('event');
        functionToRun();
    });

});
HTML

更新
setTimeout函数只是为了模拟我的问题。我需要一个不更改setTimeout代码的解决方案。我遇到的问题是，我得到了DOMSubtreeModified事件的突发，并且我只需要每个突发获得一个事件。

这似乎就是您要寻找的：

$(
  function()
  {
    setTimeout 
    (
      StartWatching,
      1000
    );
  }
);

function StartWatching()
{
  $('#container')
     .bind(
            'DOMSubtreeModified',
            function()
            {
              console.log('event');
              StopWatchingAndStartAgainLater();
            }
          );
}

function StopWatching()
{
  $('#container')
      .unbind('DOMSubtreeModified');
}

function StopWatchingAndStartAgainLater()
{
  StopWatching();
  setTimeout
  (
    StartWatching,
    3000
  );
}
这将强制执行以下流程：

Document.Ready
Create DOM watching event after one second
On event, turn off event and recreate it after three seconds, rinse, repeat
这似乎就是你想要的：

$(
  function()
  {
    setTimeout 
    (
      StartWatching,
      1000
    );
  }
);

function StartWatching()
{
  $('#container')
     .bind(
            'DOMSubtreeModified',
            function()
            {
              console.log('event');
              StopWatchingAndStartAgainLater();
            }
          );
}

function StopWatching()
{
  $('#container')
      .unbind('DOMSubtreeModified');
}

function StopWatchingAndStartAgainLater()
{
  StopWatching();
  setTimeout
  (
    StartWatching,
    3000
  );
}
这将强制执行以下流程：

Document.Ready
Create DOM watching event after one second
On event, turn off event and recreate it after three seconds, rinse, repeat
尝试使用
one（）
处理程序

尝试使用
one（）
处理程序

我自己解决了

$(function(){

    setTimeout(function(){
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
    },1000);

    setTimeout(function(){
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
    },1100);

    setTimeout(function(){
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
    },3000);

    addDivListener();

 });

 function addDivListener() {
    $('#container').bind('DOMSubtreeModified',function(){
        functionToRun();
        $(this).unbind('DOMSubtreeModified');
        setTimeout(addDivListener,10);  
    });
 }

 function functionToRun(){
    console.log('event');
 }
这会在Firebug控制台中打印事件3次，精确到100毫秒。

自己解决了它

$(function(){

    setTimeout(function(){
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
    },1000);

    setTimeout(function(){
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
    },1100);

    setTimeout(function(){
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
        $('#container')[0].innerHTML = 'test';
    },3000);

    addDivListener();

 });

 function addDivListener() {
    $('#container').bind('DOMSubtreeModified',function(){
        functionToRun();
        $(this).unbind('DOMSubtreeModified');
        setTimeout(addDivListener,10);  
    });
 }

 function functionToRun(){
    console.log('event');
 }
这将在Firebug控制台中打印事件3次，精确到100毫秒。

替代方法，它将控制任何功能的速率

// Control the call rate of a function.
//  Note that this version makes no attempt to handle parameters
//  It always induces a delay, which makes the state tracking much easier.
//    This makes it only useful for small time periods, however.
//    Just clearing a flag after the timeout won't work, because we want
//    to do the the routine at least once if was called during the wait period.
throttle = function(call, timeout) {
  var my = function() {
    if (!my.handle) {
      my.handle = setTimeout(my.rightNow, timeout);
    }
  };
  my.rightNow = function() {
    if (my.handle) {
      clearTimeout(my.handle);
      my.handle = null;
    }
    call();
  };
  return my;
};
替代方法，它将控制任何函数的速率

// Control the call rate of a function.
//  Note that this version makes no attempt to handle parameters
//  It always induces a delay, which makes the state tracking much easier.
//    This makes it only useful for small time periods, however.
//    Just clearing a flag after the timeout won't work, because we want
//    to do the the routine at least once if was called during the wait period.
throttle = function(call, timeout) {
  var my = function() {
    if (!my.handle) {
      my.handle = setTimeout(my.rightNow, timeout);
    }
  };
  my.rightNow = function() {
    if (my.handle) {
      clearTimeout(my.handle);
      my.handle = null;
    }
    call();
  };
  return my;
};
如果我理解正确的话，
setTimeout
这东西不是你要问的。您想知道如何修改元素6次，但让
函数只运行一次，对吗？如果我理解正确，那么
设置超时
内容不是您要问的。您想知道如何修改元素6次，但让
函数只运行一次，对吗？很抱歉，我无法详细说明并重写您的代码，我很忙。但是如果你不能理解的话，我可以稍后再做。我已经尝试过了，但是第一次突发事件（第一次超时）只给了我一个事件，第二次突发事件没有给我任何消息。很抱歉，我不能详细说明并重写你的代码，我赶时间。但是，如果您不能理解的话，我可以稍后再做。我已经尝试过了，但它只在第一个事件突发（第一个超时）中为我提供一个事件，而在第二个突发中没有任何事件。@mofle…对setTimeout函数的调用方式做了一些细微的更改。我将在本地对其进行测试，以验证这一点。@mofle…确认当我将StartWatching更改为simple append to a div并稍后调用StopWatching和StartAgain时，上述功能可以正常工作。如果您仍然失败，则很可能绑定到DOMSubtreeModified事件时出现问题。@mofle…并验证了它至少在FireFox 3.5和Google Chrome中的DOMSubtreeModified中有效。IE 7.0中似乎没有触发此事件。@mofle…对setTimeout函数的调用方式做了一些细微的更改。我将在本地对其进行测试，以验证这一点。@mofle…确认当我将StartWatching更改为simple append to a div并稍后调用StopWatching和StartAgain时，上述功能可以正常工作。如果您仍然失败，则很可能绑定到DOMSubtreeModified事件时出现问题。@mofle…并验证了它至少在FireFox 3.5和Google Chrome中的DOMSubtreeModified中有效。此事件在IE 7.0中似乎未触发。谢谢！在我的Chrome扩展（）中使用此功能。谢谢！在我的Chrome扩展（）中使用此选项。