addEventListener 调用函数两种写法区别

Question

// 写法一
let input1 = document.getElementById('input1');
let output1 = document.getElementById('output1');
input1.addEventListener('input', debounce(function() {
  output1.value = (input1.value || '').toUpperCase();
},
500));
// 写法二
let input2 = document.getElementById('input2');
let output2 = document.getElementById('output2');
input2.addEventListener('input', debounceTrigger);

function debounceTrigger() {
  debounce(function() {
    output2.value = (input2.value || '').toUpperCase();
  },
  500)()
}

第一种写法正常，第二种写法就不行。
如果用第二种写法，如何能实现和第一种写法一样的效果？

可进入以下页面调试
jsrun

Answer 1

你的函数没有返回值。

function debounceTrigger() {
  return debounce(function() {
    output2.value = (input2.value || '').toUpperCase();
  },
  500)
}

input2.addEventListener('input', debounceTrigger());