Question

我是JavaScript新手，这是我使用该语言编写的第一个项目。我目前正在尝试运行一个临时的“计时器”，该计时器在按下某个键时会触发（按下），而在释放键时会终止（按下）。为了进行测试，我还让每个函数在触发时都打印一条语句。不幸的是，我只能让事件监听器触发一次。我希望脚本在用户按下任何键时运行并响应输入。老实说，“计时器”是一个较大项目的占位符-每次用户按下一个键时都将运行键击/键击事件才是重要的，而不仅仅是在第一次按下时。

我已经尝试了许多不同的策略，并且在我等待答复时，我将继续研究该问题。最初，我怀疑问题是因为在加载文档之前，我在html文档的头部设置了JavaScript，但是将其移到正文中并不能解决问题。我担心这是因为我不是每次都写新行，但是更改为document.writeln并没有帮助。我已经尝试了几种简单的循环代码形式，但都没有成功-我目前正在研究如何使函数递归查看是否有帮助。我也曾尝试将代码加载到jquery中毫无用处（jquery甚至不会触发一次）。根据我在键盘记录方面所做的研究，我还对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>

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

我会注意到，当前JQuery甚至没有打印出第一条消息-我正在做更多关于为什么的研究-我只做过非常精巧的JQuery研究。

感谢您的帮助。

Answer 1

我想你想要这样的东西。

    @BeforeTest
    public void startserver()
    {
        service =AppiumDriverLocalService.buildService(new AppiumServiceBuilder()
                .usingDriverExecutable(new File(NodePath))
                 .withAppiumJS(new File(AppiumMainJS_path))
                 .withIPAddress("127.0.0.1")
                 .usingPort(4728));
//               .withLogFile(new File("")));
                System.out.println("Starting the appium serever..."+"\n"+df.format(new Date()) + "\n------------");
    }
    @Test
    public void testServer() throws FileNotFoundException
    {
        System.err.println("The Url is :"+ service.getUrl().toString());
        System.err.println("Is server Running :" + service.isRunning());
    }
    @AfterTest
    public void stopserver() throws InterruptedException
    {
        if (service.isRunning()==true)
        {
            service.stop();
            System.out.println("\n-----------------------------"
                    + ""+"\nStopping the Appium Server..."+"\n"+df.format(new Date()));
        }
    }

}

问题是当您告诉// 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>写过去的时间时：

endTimer

您正在写入文档的根目录，而不是文档中的元素。一旦被覆盖，您就没有DOM对象来接收事件了。

Answer 2

正如@JaromandaX所评论的那样，问题在于在事件处理程序中使用document.writeln()。使用console.log()可以解决此问题。

说明：：在页面加载后使用document.write()会擦除当前文档，并使用传递的字符串替换内容。 Credits

var start, finish, diff;

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

      document.onkeyup = function(e){
          finish = new Date();
          diff = finish - start;
          console.log(finish);
          console.log(diff);
      }

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

  <head>

  </head>

  <body>
  </body>
</html>

JavaScript“ keyup”和“ keydown”事件侦听器仅触发一次

2 个答案: