jQuery on()方法结合防抖函数时的参数传递问题

你遇到的问题根源有两个，咱们一步步拆解：

1. 为什么html是[object Object]？ #

你在$('#list').on()里传了第三个参数this，按照jQuery的on方法规则，这个参数会作为事件处理函数的第一个参数传入（也就是你防抖函数里的html），而不是用来设置函数的this指向。所以这个html其实是你传入的那个this（比如你的组件实例或者当前上下文对象），不是输入框元素，也不是事件对象。这就是为什么你打印出来是[object Object]，而且用JSON.stringify会失败——因为这类对象通常包含循环引用（比如组件的DOM引用、父级实例等）。

2. 修正后的防抖代码 #

根据你的需求，我给你两种可行的写法：

写法一：直接利用事件对象获取输入框

去掉多余的this参数，让防抖函数接收jQuery的事件对象，通过event.target拿到输入框元素：

$('#list').on('keyup', 'input', _.debounce(function(event) {
  const inputValue = event.target.value;
  console.log(inputValue);
  // 这里发起你的网络请求
}, 200));

写法二：利用jQuery事件的this指向

在jQuery的事件处理函数中，默认this就是触发事件的DOM元素（也就是输入框），所以可以直接用this.value取值：

$('#list').on('keyup', 'input', _.debounce(function() {
  const inputValue = this.value;
  console.log(inputValue);
  // 发起网络请求
}, 200));

如果你确实需要传递上下文this（比如组件实例）

如果你的业务逻辑需要用到外部的this（比如组件的方法、属性），可以保留on方法的第三个参数，然后调整防抖函数的参数顺序（第一个是传入的data，第二个是事件对象）：

$('#list').on('keyup', 'input', this, _.debounce(function(componentInstance, event) {
  // componentInstance 就是你传入的外部this
  const inputValue = event.target.value;
  console.log('组件实例:', componentInstance, '输入值:', inputValue);
  // 比如调用组件的方法：componentInstance.someMethod(inputValue)
}, 200));

额外提示 #

• 防抖函数默认是** trailing 模式**（即等待最后一次触发后延迟执行），如果需要领先执行（第一次触发立即执行），可以给_.debounce加第三个参数：_.debounce(func, 200, { leading: true })
• 发起网络请求时，记得处理请求的取消逻辑（比如前一次请求还未完成时，取消它），避免出现请求顺序混乱的问题。

内容的提问来源于stack exchange，提问作者DotNetRussell