0

次の例では、このスクリプトはクラス「green」をすべての「span」HTML要素にランダムに一定の割合で適用します。

var items = $('span').get();
var interval = setInterval(function() {
    var random_number = Math.floor(Math.random() * items.length);
    $(items[random_number]).addClass('green');
    items.splice(random_number, 1);
    if (items.length === 0) {
        clearInterval(interval);
      }
     }, 10);

http://jsfiddle.net/DUbQB/

関数を2回呼び出すだけで、間隔ごとに2つの要素が変更されるように更新しました。

var items = $('span').get();
var interval = setInterval(function() {

    function rand(random_number) {
    var random_number = Math.floor(Math.random() * items.length);
    $(items[random_number]).addClass('green');
    items.splice(random_number, 1);
    }

    rand(1);
    rand(2);

    if (items.length === 0) {
        clearInterval(interval);
    }
}, 500);

http://jsfiddle.net/DUbQB/3/

私が知りたいのは、要素の数に関係なく、このスクリプトですべての要素を同時にランダムに緑色に変える方法はありますか？

たとえば、http：//jsfiddle.net/DUbQB/3/は、20個の要素があり、ランダム関数が2回呼び出されるため、10間隔で完了します。

しかし、40個の要素がある場合、スクリプトは20間隔、つまり2倍の長さになります。要素の数に関係なく、このスクリプトの完了に常に同じ時間がかかるのはなぜですか？

4

4 に答える 4

2

私はJS開発者ではありませんが、これを試してみることになりました（JSFiddleを初めて試したときは本当にクールです）。

これは、丸めの違いがある場合でも、一定のステップ数になるソリューションです。

function DoTransition() {
    var items = $('span').get();
    var steps = 10;
    var residuum = 0;
    var interval = setInterval(function() {

        function rand() {
            var random_number = Math.floor(Math.random() * items.length);
            $(items[random_number]).addClass('green');
            items.splice(random_number, 1);
        }

        var localSteps = items.length / steps + residuum;
        residuum = localSteps - Math.round(localSteps);
        localSteps = Math.round(localSteps);
        for (var i = 0; i < localSteps; i++) {
            rand();
        }

        steps--;

        if (items.length === 0) {
            clearInterval(interval);
        }
    }, 500);
}

DoTransition();

更新：少数のアイテムの問題を修正しました...Math.roundへの呼び出しだけが欠落していました。現在、必要に応じて0項目が更新される中間ステップがあります。テストのために、localSteps変数（http://jsfiddle.net/vQDhf/）でアスタリスクを更新する新しいバージョンを作成しました。

UPDATE2：数学的に正しい遷移であり、タイムライン全体に均等に分散します。

于 2013-02-18T08:19:27.887 に答える
1

間隔を実行する速度または間隔ごとに変更する要素の数を決定するには、小さな数学計算を実行する必要があります。

たとえば、5000ミリ秒で完了したい場合は、次のようにします。

var items = $('span').get();
var intervalTime = 5000 / items.length;

次に、それintervalTimeをsetInterval()呼び出しで使用します。これにより、スパンがいくつあっても5000msで動作が完了します。

于 2013-02-18T08:09:07.573 に答える
1

「同じレートで」とは、間隔の数ごとに同じ数の操作を意味します。言い換えれば、あなたが現在していること（2要素/間隔）は一定の割合です。代わりに求めているのは、同じ間隔数です。これも実行可能ですが、事前定義された間隔数が必要であり、要素の数に応じてレートが変更されることに注意してください。

var numIntervals = SOME_PREDEFINED_VALUE; // e.g. always use 4 intervals
var items = $('span').get();

var elemsPerInterval = Math.floor(items.length/numIntervals);
var extraElems = elemsPerInterval * numIntervals;

var interval = setInterval(function() {

    function rand() {
        var random_number = Math.floor(Math.random() * items.length);
        $(items[random_number]).addClass('green');
        items.splice(random_number, 1);
    }

    // do one extra element per iteration to account
    // for residuals due to rounding
    int j = extraElems-- > 0 ? -1 : 0;

    while ( j < elemsPerInterval ) {
        rand();
        j++;
    }

    if (items.length === 0) {
        clearInterval(interval);
    }
}, 500);
于 2013-02-18T08:10:12.293 に答える
0

http://jsfiddle.net/CA97a/

ありがとう@JWHはそれにタイマーを与えますhttp://jsfiddle.net/CA97a/5/

タイマー間隔の変更はもっと簡単になると思います

<div class="container">
</div>

<script>
// Use for test
for (var i=0; i < 20 /*Count*/; i++) {
    $(".container").append("<span> "+i+" </span>");
}

// Script start
var items = $('span').get();
var interval = setInterval(function() {
    var random_number = Math.floor(Math.random() * items.length);
    $(items[random_number]).addClass('green');
    items.splice(random_number, 1);

    if (items.length <= 0) {
        clearInterval(interval);
    }
}, 5000/items.length); // Finish in 5 sec
</script>

私は別の考えを持っています、この方法で時間がより正確になります、私はFirefoxで10Kでそれをテストしました、あまり遅れを感じないでください http://jsfiddle.net/LmE6J/

$("span").each(function () {
    function closure(s) {
        return function () {
            $(s).addClass("green");
        };
    }
    setTimeout(closure(this), (Math.random()*Math.floor(5000)));
});
于 2013-02-18T09:31:50.837 に答える