Javascript jQuery函数，如果不是-太快？

我有一个基本的功能，就是改变表格中的单元格颜色

我从一个滑块中获取值，并尝试为表格中的单元格着色，就像它们跟踪滑块一样。它工作了一半，但跟不上滑块或速度太快

在我看来，myFunction（）在滑块的每一步执行不止一次，而它应该只在滑块值更改时启动

代码如下：

var p =0;

function myFunction()
{
 var SliderValue = $('#slider-step').val();


 var k = Math.floor(SliderValue/10);


 if (p == k) {
             $('.grid').find('tr:first td:nth-child(' + k + ')').css("background-color", "#F0B4F8");

             console.log("SliderValue--->" +  SliderValue + "   k = " + k + "    p = " + p);

            p = 0;

            } 

            else {
                 $('.grid').find('tr:first td:nth-child(' + k + ')').css("background-color", "#FFFFFF");

         console.log("SliderValue--->" +  SliderValue + "   k = " + k + "    p = " + p);

         p = k;

         }           


}

CSS:

HTML:表格：

<table class="grid" id="grid" cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
            </tbody>
        </table>

HTML:滑块：

 <label for="slider-step">
        Position
        </label>
        <input type="range" name="slider-step" id="slider-step" value="0" min="0"
        max="100" step="6.4" class="ui-hidden-accessible" onchange="myFunction()">

位置

也许这会让你走上正轨

小提琴上的第一个注意事项是滑块步长为

10

，以匹配代码中的除10。然后我将其更改为使用

p

存储滑块的最后一个值。这允许与当前值进行比较，并且可以在其向上或向下滑动时对其进行适当的着色

var p =0;

function myFunction()
{
    var SliderValue = $('#slider-step').val();
    var k = Math.floor(SliderValue/10);

    // if the value is decreasing
    if (p >= k) {
        $('.grid').find('tr:first td:nth-child(' + k + ')').css("background-color", "#F0B4F8");
        console.log("SliderValue--->" +  SliderValue + "   k = " + k + "    p = " + p);
    // otherwise it's increasing
    } else {
        $('.grid').find('tr:first td:nth-child(' + k + ')').css("background-color", "#FFFFFF");
        console.log("SliderValue--->" +  SliderValue + "   k = " + k + "    p = " + p);
    }           
    // save value for comparison next time
    p = k;

}

---

调用的是什么？

myFunction（）

？对输入的更改正在改变它…尝试调用onMouseUp（）函数，而不是onChange（）。这样，计算中只考虑最终值（而不是起始值和最终值之间的所有值）。假设你有一个滑块，它。这有意义吗？如果你能发布一个JSFIDLE，你会得到更多的人来帮助你更快（）@user1203605在小提琴上检查左边的设置，在

var p =0;

function myFunction()
{
    var SliderValue = $('#slider-step').val();
    var k = Math.floor(SliderValue/10);

    // if the value is decreasing
    if (p >= k) {
        $('.grid').find('tr:first td:nth-child(' + k + ')').css("background-color", "#F0B4F8");
        console.log("SliderValue--->" +  SliderValue + "   k = " + k + "    p = " + p);
    // otherwise it's increasing
    } else {
        $('.grid').find('tr:first td:nth-child(' + k + ')').css("background-color", "#FFFFFF");
        console.log("SliderValue--->" +  SliderValue + "   k = " + k + "    p = " + p);
    }           
    // save value for comparison next time
    p = k;

}