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());