javascript - jQuery 函数 if else - 太快了吗？

Question

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

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

对我来说，似乎 myFunction() 在 slider 的每个步骤中执行了不止一次，而它应该只在 slider 值更改时触发...

代码如下:

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: slider :

 <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

也许这会让您走上正轨。 Fiddle

首先注意 fiddle 上的 slider 步长是 10，以匹配代码中除以 10。然后我将其更改为使用 p 来存储 slider 的最后一个值。这允许与当前值进行比较，并且您可以在它向上或向下滑动时适本地为其着色。

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;

}