Question

我有一个Websocket服务器，可以从1到1024发送数据。

使用JQuery，我试图设置一个进度条，显示收到的实际值。它不起作用......

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
    "use strict";
    // Initialize everything when the window finishes loading
    window.addEventListener("load", function(event) {
      var message = document.getElementById("message");
      var socket;

        // Create a new connection to websocket server
        socket = new WebSocket("ws://xx.xx.xx.xx:8080", "echo-protocol");

        // Display messages received from the server
        socket.addEventListener("message", function(event) {
          $("#progressbar").progressbar("option", "value", event.data);
          message.textContent = event.data;
        });
    });
  </script>
  <script>
$(document).ready(function() {
  $( "#progressbar" ).progressbar({
      min: 1,
      max: 1024
    });
    $("#progressbar").progressbar("option", "value", event.data);
});
</script>
</head>

<body>
<div id="data">
<div id="progressbar"></div>
<div id="message"></div>
</div>
</div>

事实是#message div显示没有问题的值，但我无法更新JQuery进度条... 任何想法都会受到欢迎......

Answer 1

我认为您的event.data值属于string类型，例如'157'而不是number，例如157。要找到它，请尝试：

console.log(typeof event.data); // => string

要解析它以键入number，您必须使用parseInt。 parseInt有两个参数，第一个是要解析的值，第二个是值10是“以确保字符串被解释为基数10（十进制）。”有关更多信息，请阅读：Javascript parseInt gives very unexpected results

var intValue = parseInt(event.data, 10);
console.log(typeof intValue); // => number

parseInt参数的文档： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

为了让您的代码更加出色，您还可以检查该值是否介于min和max之间。我的意思是你定义的边界0（选项min不在文档中）和1024之间如下：

var min = 0;
var max = $("#progressbar").progressbar("option", "max");

if (intValue >= min && intValue <= max) {
    $("#progressbar").progressbar("option", "value", intValue);
}

jquery：无法更新进度条

1 个答案: