jQuery函数是否其他-太快了？

Question

我有一个基本功能，可以更改表格中的单元格颜色。

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

在我看来，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：

#grid, #grid td {
border: 1px solid black;
background-color: yellow;

}

#grid td {
width: 25px;
height: 10px;
}

#grid td, th {
border-left: solid 3px black;
}

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()">

Answer 1

也许这会使您走上正确的道路。 小提琴

在小提琴上的第一个注意事项是滑块为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;

}