Как отформатировать jQuery Ben Alman

Question

У меня проблема с синтаксисом с Ben Alman's jQuery Debounce plugin. Он работает так, как ожидалось, в одном формате, но мне он нужен в другом.

Как я могу сделать эту работу без ошибки?

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() каждый раз, когда вызывается обработчик событий (следовательно, новые экземпляры прокси), поэтому debounce не может отслеживать последнее время вызова.

Правда, выше не будет СЛУЧАЙ TypeError вы столкнулись, и, поглядев на debounce источника, я не уверен, где TypeError происходит от, но как только вы исправить TypeError, вы столкнетесь с более фатальной проблемой, описанной выше.

Что же вы хотите, чтобы смотреть это:

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'); 
       } 
   }); 
   

альтернативы предоставляются в порядке, я бы рекомендовал их.