使用jQuery为每个事件突发运行一次函数 [英] Run function once per event burst with jQuery

问题描述

我正在使用jQuery来侦听DOMSubtreeModified事件，然后执行一个函数。我需要的是每个事件爆发只运行一次函数的方法。因此，在这种情况下，事件将仅在1秒后运行，并在3秒后再次运行。做这个的最好方式是什么？

I'm using jQuery to listen to DOMSubtreeModified event, and then execute a function. What I need is a way to only run a function once per event burst. So in this case, the event will only run after 1 second, and again after 3 seconds. What is the best way to do this?

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

<div id="container"></div>

更新

setTimeout函数只是为了模拟我的问题。我需要一个解决方案，而无需更改setTimeout代码。我遇到的问题是我得到了一些DOMSubtreeModified事件，我需要每个爆发只有一个。

Update
The setTimeout function are there just to emulate my problem. I need a solution without changing the setTimeout code. The problem I'm having is that I get burst of DOMSubtreeModified events, and I need to get only one per burst.

推荐答案

我自己解决了。

$(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毫秒。

This prints out event 3 times in the Firebug console, and is accurate down to 100 ms.

这篇关于使用jQuery为每个事件突发运行一次函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！