jquery - Ben Alman の jQuery Debounce をフォーマットする方法

Question

Ben Alman の jQuery Debounce プラグインの構文に問題があります。ある形式では期待どおりに機能しますが、別の形式では必要です。

エラーをスローせずにこれを機能させるにはどうすればよいですか?

coolThing.on({
    keydown: function() {

        console.log('keydown');

        $.debounce(500, function() { // Uncaught TypeError: Cannot read property 'toLowerCase' of undefined :(

            debugLog('debounced keydown');
        })();
    }),
    focus: function() {

        console.log('focus');
    }),
    blur: function() {

        console.log('blur');
    })
});

ありがとう！！

__

動作する他の形式は次のとおりです。

coolThing.keydown($.debounce(500, function() {

    console.log('debounced keydown');
}));

coolThing.on({
    keydown: function() {

        console.log('keydown');
    }),
    focus: function() {

        console.log('focus');
    }),
    blur: function() {

        console.log('blur');
    })
});

coolThing.on({
    keydown: $.debounce(500, function(e) {

        // wouldn't it be great to execute other things before $.debounce()?

        debugLog('debounced keydown');
    }),
    focus: function() {

        console.log('focus');
    }),
    blur: function() {

        console.log('blur');
    })
});

Answer 1

このままではうまくいきません。$.debounce()「プロキシ」関数を返します。この関数は、最後に呼び出されてからの経過時間が指定した期間よりも長い場合にのみ、イベント ハンドラーを実行します。

コードの問題は$.debounce()、イベント ハンドラーが呼び出されるたびに新しいインスタンスを作成しているため (したがって、新しいプロキシ インスタンス)、デバウンスが最後の呼び出し時間を追跡できないことです。

確かに、上記はあなたが経験している TypeError には当てはまりません。debounceソースを調べたところ、TypeError がどこから発生したのかわかりませんが、TypeError を修正すると、より致命的な問題に遭遇するでしょう。上で概説した問題。

代わりにやりたいことは次のとおりです。

1. ハンドラは個別に指定してください。1 つはデバウンス用、もう 1 つはすぐに実行したいこと用です。

   coolThing.on({
       keydown: function() {
   
           console.log('keydown');
   
       },
       focus: function() {
   
           console.log('focus');
       },
       blur: function() {
   
           console.log('blur');
       }
   }).on('keydown', $.debounce(500, function () {
   
   });
   

2. を使用して自分で追跡を開始しますsetTimeout。

3. 大規模な IIFE ハックを使用します。

   coolThing.on({
       keydown: (function () {
           var bounce = $.debounce(500, function () {
   
           });
   
           return function (e) {
               bounce.apply(this, arguments);
   
               console.log('keydown');
           };
       }()),
       focus: function() {
   
           console.log('focus');
       },
       blur: function() {
   
           console.log('blur');
       }
   });
   

代替案は、私が推奨する順序で提供されています。