刚学 js，不太熟悉回调函数，想问下这个代码会出问题吗

This topic created in 1927 days ago, the information mentioned may be changed or developed.

function init(fn){
    document.onkeydown=(e)=>{
        if(e.key==="Enter"){
            fn(true);
        }else if(e.key==="Escape"){
            fn(false);
        }
    }
}

let fn=(arg)=>{
    if(arg){
        console.log("enter");
    }else{
        console.log("esc");
        init(fn);
    }
}

init(fn)

想监听 enter 和 esc 键，实现一个类似前进和后退的动作，不知道这个代码会出问题吗，一开始以为是无限递归，但是跑起来又好像没问题

12 replies • 2021-08-04 14:09:05 +08:00

3dwelcome

Aug 3, 2021 via Android

不知道为什么要函数套娃，好像没什么实际意义，单纯为了测试？

zxCoder

Aug 3, 2021

@3dwelcome 因为写着写着就需要这样子。。。。把业务相关的拿掉就是这个结构了。。。我也觉得怪怪的

xiangyuecn

Aug 3, 2021

很正常不过的代码了，原汁原味的 js

函数赋值了一下而已，并没有调用

shakaraka

Aug 3, 2021

```
function init() {
document.onkeydown = (e) => {
switch (e.key) {
case 'Enter':
isEnter()
break;
case 'Escape':
isEscape()
break;
}
}
}

function isEnter() {
//
}

function isEscape() {
//
}

init()
```

这样每个按键的 func 各做各的不就行咯。

wenzichel

Aug 4, 2021

点击 esc 是会再次执行 init 方法，但只是 onkeydown 方法再次被重新定义而已。

init 中传入 fn 方法也是可以的，这 fn 就是一个回调函数，然后执行 fn 这个函数。

emonc

Aug 4, 2021 via Android

可读性好差😪

Puteulanus

Aug 4, 2021

document.addEventListener('keydown', console.log)
考虑下 Listener 不

learningman

Aug 4, 2021 via Android

可以是可以，好丑

raaaaaar

Aug 4, 2021 via Android

@3dwelcome fp

wenzichel

Aug 4, 2021

@Puteulanus 你这种写法，多次执行时，会造成重复监听！

Puteulanus

Aug 4, 2021

@wenzichel 先不说为什么要多次执行。。

> getEventListeners(document)
< {click: Array(1), DOMContentLoaded: Array(1), mouseup: Array(1)}

> document.addEventListener('keydown', console.log)
< undefined

> document.addEventListener('keydown', console.log)
< undefined

> getEventListeners(document)
< {keydown: Array(1), click: Array(1), DOMContentLoaded: Array(1), mouseup: Array(1)}

不用匿名函数，你确定会重复监听吗
看看 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#multiple_identical_event_listeners

wenzichel

Aug 4, 2021

@Puteulanus 哦，么事了，我是用匿名函数来注册的。