0

HTML5 で JavaScript を使用しています。ユーザーがボタンをクリックすると、イベント駆動型の JavaScript 関数が起動します。ユーザーがボタンをもう一度クリックすると、この関数の別のインスタンスが起動します。したがって、イベントを処理する同じ関数のインスタンスが 2 つあります。ただし、新しいインスタンスを実行したいだけです。の最初のインスタンスを終了するにはどうすればよいですか?

例は、次のコードを持つ関数です

Canvas.paper = Raphael(xOffset,yOffset,imageWidth,imageHeight);
masterBackground = Canvas.paper.rect(0,0,imageWidth,imageHeight);

window.onkeydown=function(e){
    // Event handler code
}

document.addEventListener('keydown', function(event) {
    // Event handler code
}

masterBackground.mousemove(function(e){
    // Event handler code
}
4

4 に答える 4

1

関数が一度だけ実行されるようにしたい場合:

ベニーの例に基づく例

function onlyOnce(proc){
    return function () {
        var result = proc.apply(this,arguments);
        proc = function () {};
        return result;
    }
}
于 2013-04-12T17:02:26.590 に答える
1

これにはいくつかの解決策があり、そのうちのいくつかはライブラリに依存しますが、見てみると「より良い」ものです。

たとえば、jQuery を使用すると、次のようになります。

<button>Click me</button>

<script>
  $('button').on('click', handleButtonClick);

  function handleButtonClick() {
    $(this).off('click', handleButtonClick); //disable click event
    //do various things you don't want duplicated
    $(this).on('click', handleButtonClick); //reattach handler
  }
</script>

また：

<button>Click me</button>

<script>
  $('button').once('click', handleButtonClick); //attach one-time handler

  function handleButtonClick() {
    //do various things you don't want duplicated
    $(this).once('click', handleButtonClick); //attach one-time handler
  }
</script>

ほとんどのライブラリは同様のメソッドをサポートしています。バニラ JS を使用したい場合は、もちろんそれも可能です。「私はそうではない」はそのための良い例を提供しました：https://stackoverflow.com/a/15976888/622129

于 2013-04-12T16:54:26.757 に答える
1

非同期で長時間実行される何かが起こっていることは明らかです。

同時インスタンスが実行されないようにするには、1 つの開始時に設定されるフラグを使用して、他のインスタンスが開始できないようにします。次に、現在のものが終了したら、フラグをリセットして、別のフラグを開始できるようにします。

 // Immediately invoked function, makes a variable and returns the handler
 //    that uses the variable as a flag.
button.onclick = (function() {

    // local variable, only accessible to the returned handler
    var running = false;

    // This is your event handler.
    return function(e) {
        if (running === false) {
            running = true;

            // run your asynchronous operation

            // after it's complete,  set `running = false;`
        }
    };
})();
于 2013-04-12T16:54:36.530 に答える
1 
var buttonView = document.getElementById('buttonView');

buttonView.handleEvent = function(event) {
    window.alert(this.id);
    //this.onclick = null;
};

buttonView.onclick = buttonView.handleEvent;

試してみてください: http://jsfiddle.net/KHQ4y/

編集：特定のコードを提供する前にこれを投稿しましたが、アイデアはわかります。

于 2013-04-12T16:56:04.640 に答える