CVTE面试题——解决用addEventListener绑定的函数传参无效问题

html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
head>
<body>
<input id="content" value="输入内容" />
body>
<script>
  var oInput = document.getElementById("content");
  oInput.addEventListener("keyup",deBounce(fn,2000),false)
  function fn(){
    console.log(this.value);
  };
  function deBounce(delay){
    return fn
  }
script>
html>

今天去CVTE面试,面试官给了这样一道题,当时调试的时候就懵逼了,在deBounce里打的断点根本无效 , 写的代码没有生效。原来js的addEventListener绑定匿名函数时是没有问题的,但是要给函数传参的话下边这种写法是有问题的

deBounce(fn,2000)

如果要传参,要用deBounce.bind(fn,2000),以下是改造后的代码。心塞,这种情况问题头回遇到,权当学习了把!

html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
head>
<body>
<input id="content" value="输入内容" />
body>
<script>
  var oInput = document.getElementById("content");
  oInput.addEventListener("keyup",deBounce.bind(fn,2000),false)
  function fn(){
    console.log(this.value);
  };
  function deBounce(delay){
    var value = oInput.value
    clearTimeout(this.timer);               //关闭已开的定时器
    this.timer = setTimeout(function(){
      clearTimeout(this.timer);             //关闭已开的定时器
      console.log(value)
    },delay)
  }
script>
html>

你可能感兴趣的:(H5)