javascript - jQuery UI slider 最小/最大值到全局变量

Question

我在理解变量作用域方面遇到了麻烦，所以我很难解决这个问题。我有这样的 js 脚本:

<div id="slider"></div>


$(document).ready(function() {

$(function(){

  var update = function() {
    var min = $("#slider").slider("values")[0];
    var max = $("#slider").slider("values")[1];

     var i = setInterval(function() {
        console.log("Hi");
    }, min + Math.random() * max);

    return i;
  }

  var i;

  $("#slider").slider({
    values: [1000, 1750],
    min: 500,
    max: 3900,
    step: 0.1,
    slide: function (e, ui) {
      clearInterval(i);
      i = update();
    }

  });

});

});

我如何真正使最小和最大变量成为“全局”变量，以便我可以从此函数或其他地方使用它们？ interval with console.log 就是一个例子，不用担心。通常，这是来自 jQuery UI 的 slider 。

Answer 1

如果您在函数内声明最小和最大变量，则它们仅在该函数内可用。但是，如果您在全局范围内(在任何函数之外)声明它们，则可以从任何地方访问它们。

从函数中更新全局变量时，不要使用 var 关键字:

myVariable = myValue;  // without var keyword, this variable refers to global myVariable (or wherever it is first found in the scope chain.  If not found, it will create a new variable in current scope.)

如果使用 var 关键字，将在当前范围内创建一个新变量。

var myVariable = myValue;  // this creates a new variable myVariable in the current scope

// Declare variables in the global scope
var min = 50;
var max = 200;

var update = function() {
    // Update the global variable - do not use var keyword
    min = $("#slider").slider("values")[0];
    max = $("#slider").slider("values")[1];
}

// Logs the global min/max variables
var logValues = function() {
    console.log("Min = " + min + ", Max = " + max);
}

$(document).ready(function() {

$(function(){

  $("#slider").slider({
    values: [50, 200],
    min: 5,
    max: 390,
    step: 0.1,
    slide: function (e, ui) {
      update();
    }
    
  });
  
});

});

input { display: block; margin: 20px 0; }

<link href="https://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div id="slider"></div>
<p>Moving the slider updates min and max variables to the current selected values.</p><p>  Click the button to log the current value (taken from global variables).
<input type="button" value="Get Current Values" onclick="logValues()" />