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()您的代码的问题在于，每次调用事件处理程序时您都在创建新实例（因此是新的代理实例），因此 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 hack；

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

替代品按照我推荐的顺序提供。