JavaScript'；键控'；和'；按键向下'；事件侦听器只触发一次_Javascript_Jquery_Addeventlistener_Onkeydown_Onkeyup

JavaScript'；键控'；和'；按键向下'；事件侦听器只触发一次

javascript jquery

JavaScript'；键控'；和'；按键向下'；事件侦听器只触发一次,javascript,jquery,addeventlistener,onkeydown,onkeyup,Javascript,Jquery,Addeventlistener,Onkeydown,Onkeyup,我是一名JavaScript程序员新手-这是我在该语言中的第一个项目。我目前正在尝试运行一个临时“计时器”，当按下一个键（keydown）时触发，当释放该键（keyup）时结束。出于测试目的，我还让每个函数在触发时打印一条语句。不幸的是，我只能让事件侦听器触发一次。我希望脚本在用户点击任何键时运行并响应输入。老实说，“计时器”是一个更大项目的占位符——让keydown/keydup事件在用户每次按键时运行才是重要的，而不仅仅是在初次按键时我已经尝试了很多不同的策略，我将继续研究这个问题，等待回

我是一名JavaScript程序员新手-这是我在该语言中的第一个项目。我目前正在尝试运行一个临时“计时器”，当按下一个键（keydown）时触发，当释放该键（keyup）时结束。出于测试目的，我还让每个函数在触发时打印一条语句。不幸的是，我只能让事件侦听器触发一次。我希望脚本在用户点击任何键时运行并响应输入。老实说，“计时器”是一个更大项目的占位符——让keydown/keydup事件在用户每次按键时运行才是重要的，而不仅仅是在初次按键时

我已经尝试了很多不同的策略，我将继续研究这个问题，等待回应。起初，我怀疑问题是因为我在加载html文档之前在其头部设置了JavaScript，但将其移动到正文并没有解决问题。我担心这是因为我不是每次都写新行，而是改成document.writeln没有帮助。我尝试了几种简单的代码循环形式，但没有成功——我目前正在研究如何使函数递归，看看这是否有帮助。我还尝试将代码加载到jquery中，但没有成功（jQueryOne甚至不会触发一次）。根据我对键盘记录所做的研究，我还对window.setInterval做了一些工作，但我不完全了解它的功能，也没有成功

// The initial script
<!DOCTYPE html>
<html>

  <head>
    <script type="text/javascript">
    var start, finish, diff;

    // Adds event listeners
    document.addEventListener('keydown',startTimer);
    document.addEventListener('keyup',endTimer);

    // Runs on keydown, simply stores a new date
    function startTimer(e){
        start = new Date();
    }

    // Runs on keyup, stores a new date (time in milliseconds since 
epoch),
    // then takes and prints the difference between the two. 
    function endTimer(e){
        finish = new Date();
        diff = finish - start;
        document.write(diff);
    }

    </script>
  </head>

  <body>
  </body>
</html>

// "Most stable" version, utilizing onkeyup/onkeydown and writeln
<!DOCTYPE html>
<html>

  <head>

  </head>

  <body>
    <script type="text/javascript">
    var start, finish, diff;

      document.onkeydown = function(e){
          start = new Date();
          document.writeln(start);
      }

      document.onkeyup = function(e){
          finish = new Date();
          diff = finish - start;
          document.writeln(finish);
          document.writeln(diff);
      }
    </script>
  </body>
</html>

// JQuery version
<!DOCTYPE html>
<html>

  <head>

  </head>

  <body>
    <script src="jquery-3.4.1.min.js">
    var start, finish, diff;

    $("q").keydown(function(){
      start = new Date();
      document.writeln(start);
    });

    $("w").keyup(function(){
      finish = new Date();
      diff = finish - start;
      document.writeln(finish);
      document.writeln(diff);
    });

    </script>
  </body>
</html>

//初始脚本
变量开始、结束、差异；
//添加事件侦听器
文件。添加的监听器（“键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键）；
文件。添加的监听器（'keyup'，endTimer）；
//在keydown上运行，只存储一个新日期
函数起始值（e）{
开始=新日期（）；
}
//在keyup上运行，存储新日期（自
时代），
//然后获取并打印两者之间的差异。
函数结束计时器（e）{
完成=新日期（）；
差异=完成-开始；
文件。编写（差异）；
}
//“最稳定”版本，利用onkeyup/onkeydown和writeln
变量开始、结束、差异；
document.onkeydown=函数（e）{
开始=新日期（）；
文件写入（开始）；
}
document.onkeyup=函数（e）{
完成=新日期（）；
差异=完成-开始；
文件写入（完成）；
书面文件（差异）；
}
//JQuery版本
变量开始、结束、差异；
$（“q”）.keydown（函数（）{
开始=新日期（）；
文件写入（开始）；
});
$（“w”）.keyup（函数（）{
完成=新日期（）；
差异=完成-开始；
文件写入（完成）；
书面文件（差异）；
});

我希望“网站”在我每次按下一个键时都能打印出准确的存储日期，然后在我释放它时打印出一个新的日期以及两者之间的差异。相反，当我第一次按下一个键时，它会打印出信息，然后无论我做什么都不会打印

我会注意到，JQuery one目前甚至没有打印出第一条消息——我正在做更多关于为什么的研究——我只做了非常精简的JQuery研究

感谢您的帮助。

正如@JaromandaX所评论的，问题在于在事件处理程序中使用

document.writeln（）

。改为使用

console.log（）

修复该问题

说明：加载页面后，使用

document.write（）

清除当前文档，并用传递的任何字符串替换内容

var开始、结束、差异；
document.onkeydown=函数（e）{
开始=新日期（）；
console.log（启动）；
}
document.onkeyup=函数（e）{
完成=新日期（）；
差异=完成-开始；
控制台日志（完成）；
控制台日志（diff）；
}

我想你想要这样的东西

// The initial script
<!DOCTYPE html>
<html>

 <head>
   <script type="text/javascript">
    var start, finish, diff;

// Adds event listeners
document.addEventListener('keydown',startTimer);
document.addEventListener('keyup',endTimer);

// Runs on keydown, simply stores a new date
function startTimer(e){
    console.log('down', e)
            start = new Date();
        }

        // Runs on keyup, stores a new date (time in milliseconds since 
//  epoch),
        // then takes and prints the difference between the two. 
        function endTimer(e){
      console.log('up', e)
           finish = new Date();
            diff = finish - start;
          console.log('diff', diff)
            document.querySelector('body').innerHTML = (diff);
        } 

   </script>
  </head>

 <body>
 </body>
</html>

您正在写入文档的根，而不是文档中的元素。一旦被覆盖，您就没有一个DOM对象可以从中获取事件。

不要使用

文档。写入或文档。写入-使用控制台。日志-它可能会起作用jquery代码不起作用，因为您不知道jquery$（'q'）。keydown
不会为q
键添加事件侦听器-它会为标记名为q
的元素添加keydown事件侦听器。。。i、 e.你的报告中没有任何内容HTML@JaromandaX感谢您的反馈，我知道它指的是元素名称，但我不确定如何为用户按下的任何键指定名称-我想我会阅读一些内容。至于你的第一句话：我完全同意。正如我所说，这是我第一次使用JavaScript，因为我对JavaScript一无所知，所以我完全知道0 JQuery.document.write与JQuery完全无关-因此我的第一条语句也与JQuery无关：D@JaromandaX我的意思是：“jquery代码不起作用，因为你不知道jquery”对不起，我没有说清楚，这就是为什么我说我完全同意并且没有JQuery的经验。我至少知道我在使用document.write，然后再下载JQueryHuh，谢谢你的反馈！我会很快测试并编辑我的回复-我没有意识到文档。写了这个——我猜我是在想C++，或者java的Soop.Out.PrtLn。我对web开发非常陌生，您应该使用performance.now（）
而不是newdate（）
。此外，当按下键时，您的开始日期将不断重置，除非您将某些状态变量设置为false
，然后仅在keyup@GrantNoe很棒的一点，我没有这样做
document.write(diff)