javascript - 有办法到 "compress"以下所以不会那么长

Question

我把它放在片段中以便于查看。代码可能会更大，那么我怎样才能缩短它以获得更快的页面响应/上传？请帮忙!

LED0 = "";
LED1 = "";
LED2 = "";
LED3 = "";
LED4 = "";
LED5 = "";
LED6 = "";
LED7 = "";
LED8 = "";
LED9 = "";
LED10 = "";
LED11 = "";
LED12 = "";
LED13 = "";
LED14 = "";
LED15 = "";
var LED0_state = 0;
var LED1_state = 0;
var LED2_state = 0;
var LED3_state = 0;
var LED4_state = 0;
var LED5_state = 0;
var LED6_state = 0;
var LED7_state = 0;
var LED8_state = 0;
var LED9_state = 0;
var LED10_state = 0;
var LED11_state = 0;
var LED12_state = 0;
var LED13_state = 0;
var LED14_state = 0;
var LED15_state = 0;



request.open("GET", "ajax_inputs" + strLED0 + strLED1 + strLED2 + strLED3 + strLED4 + strLED5 + strLED6 + strLED7 + strLED8 + strLED9 + strLED10 + strLED11 + strLED12 + strLED13 + strLED14 + strLED15 + nocache, true);
request.send(null);
setTimeout('GetArduinoIO()', 2000);
strLED0 = "";
strLED1 = "";
strLED2 = "";
strLED3 = "";
strLED4 = "";
strLED5 = "";
strLED6 = "";
strLED7 = "";
strLED8 = "";
strLED9 = "";
strLED10 = "";
strLED11 = "";
strLED12 = "";
strLED13 = "";
strLED14 = "";
strLED15 = "";



		function GetButImp0()
		{
			if (LED0_state === 1) {
				LED0_state = 0;
				strLED0 = "&LED0=0";
			}
			else {
				LED0_state = 1;
				strLED0 = "&LED0=1";
			}
		}
		function GetButImp1()
		{
			if (LED1_state === 1) {
				LED1_state = 0;
				strLED1 = "&LED1=0";
			}
			else {
				LED1_state = 1;
				strLED1 = "&LED1=1";
			}
		}
		function GetButImp2()
		{
			if (LED2_state === 1) {
				LED2_state = 0;
				strLED2 = "&LED2=0";
			}
			else {
				LED2_state = 1;
				strLED2 = "&LED2=1";
			}
		}
		function GetButImp3()
		{
			if (LED3_state === 1) {
				LED3_state = 0;
				strLED3 = "&LED3=0";
			}
			else {
				LED3_state = 1;
				strLED3 = "&LED3=1";
			}
		}
		function GetButImp4()
		{
			if (LED4_state === 1) {
				LED4_state = 0;
				strLED4 = "&LED4=0";
			}
			else {
				LED4_state = 1;
				strLED4 = "&LED4=1";
			}
		}
		function GetButImp5()
		{
			if (LED5_state === 1) {
				LED5_state = 0;
				strLED5 = "&LED5=0";
			}
			else {
				LED5_state = 1;
				strLED5 = "&LED5=1";
			}
		}



// ..........etc............//

谢谢您的帮助!

Answer 1

看起来您可能只需要存储一个数组 - LED 状态数组。在这种情况下，您可以使用函数生成适当的请求:

// these are the variables we'll need
var num_leds = 16;
var led_states = [];



// initially, all leds are off
for (var i = 0; i < num_leds; i ++) {
  led_states[i] = 0;
}



// returns a single led's status as part of a query string
function get_led_str(index) {
  return "&LED" + index + "=" + led_states[index];
}



// gets a string that contains each led's state, for sending to the server
function get_request_str() {
  var nocache "&nocache=" + Math.random() * 10000;

  var state_strings = led_states.map(function(state, index) {
    return get_led_str(index);
  }).join('');

  return "ajax_inputs" + state_strings + nocache;
}



// makes a request to the server to update the leds
function make_request() {
  var request = new XMLHttpRequest();

  // send the request
  request.open("GET", get_request_str(), true);
  request.send(null);
}



// toggles an led on and off
function toggle_led(index) {
  var state = led_states[index];

  if (state = 1)
    state = 0;
  else if (state = 0)
    state = 1;

  led_states[index] = state;

  // send a request to the server to update the led (since it was toggled)
  make_request();
}

您还需要稍微更新一下您的 html。

以前，你可能有过这样的经历:

<button onclick="GetButImp0()">Toggle LED 0</button>
<button onclick="GetButImp1()">Toggle LED 1</button>
<button onclick="GetButImp3()">Toggle LED 2</button>
<button onclick="GetButImp4()">Toggle LED 3</button>

现在，您可以这样做:

<button onclick="toggle_led(0)">Toggle LED 0</button>
<button onclick="toggle_led(1)">Toggle LED 1</button>
<button onclick="toggle_led(3)">Toggle LED 2</button>
<button onclick="toggle_led(4)">Toggle LED 3</button>