-2

我是编写 Javascript 和 jQuery 的新手。如果我有两个滑块，并且当我移动每个滑块时它们会相互影响，那会很慢我在每个滑块上使用 2 个绑定命令

难道bind命令性能会变慢？

这是我的代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
<script>
$(document).ready(function(e) {
    init();
});

function init() {
    $("#f").bind('change', a);
    $("#g").bind('change', b);
}

function a() {
    var x;
    var y;
    y = $("#f").val();
    x = ftoc(y);
    $('#g').val(x);
    $('#g').slider('refresh');
}

function ftoc(y) {
    var z;
    z = (y - 32) * 5 / 9;
    return z;
}

function b() {
    var x1;
    var y1;
    y1 = $("#g").val();
    x1 = ftoc1(y1);
    $('#f').val(x1);
    $('#f').slider('refresh');
}

function ftoc1(y1) {
    var z1;
    z1 = y1 * (9 / 5) + 32;
    return z1;
}
</script>

</head>

<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Header</h1>

</div>

<div data-role="content">

<div data-role="fieldcontain">
<label for="slider">Fah</label>
<input type="range" name="slider" data-track-theme="b" id="f" value="0" min="-50" max="200" />

<label for="slider">Celsius</label>
<input type="range" name="slider" data-highlight="true" id="g" value="0" min="-50" max="150" />

</div>


</div>
</div>

</body>
</html>
4

1 回答 1

0

您可以在以编程方式进入时禁用绑定

function init() {
    $("#f").bind('change', a);
    $("#g").bind('change', b);
}

var isChanging = false;

function a() {
    if(isChanging)return;
    isChanging = true;
    var x;
    var y;
    y = $("#f").val();
    x = ftoc(y);
    $('#g').val(x);
    $('#g').slider('refresh');
    isChanging = false;
}

function ftoc(y) {
    var z;
    z = (y - 32) * 5 / 9;
    return z;
}

function b() {
    if(isChanging)return;
    isChanging = true;

    var x1;
    var y1;
    y1 = $("#g").val();
    x1 = ftoc1(y1);
    $('#f').val(x1);
    $('#f').slider('refresh');
    isChanging = false;
}

function ftoc1(y1) {
    var z1;
    z1 = y1 * (9 / 5) + 32;
    return z1;
}

创建的递归使更改变慢...请参阅小提琴解决方案-> http://jsfiddle.net/Castrolol/hQ5jz/

于 2013-08-15T13:34:25.497 回答