【JavaScript】「iPhone iOS Form submit 重い 遅い」でお困りの方へ

一画面に沢山のFormタグがあると、iPhoneで処理がとても重くなるようです。簡単にPHPで書くとこんな感じ

//おおよそ1000個ぐらい走らせると重い。PCでは問題なさそう。
<?for($i=0;$i<=1000; $i++) { ?>
    <form action="example<?=$i?>" method="POST">
        <input type="submit" value="<?=$i?>">
    </form>
<? } ?>

こういうコードが良いかどうかは別議論ありそうですが、解決方法としてはFormの個数を減らすことです。大人の事情で難しい場合はJSで処理してしまいましょう。

HTML

//actionが変わる場合はdata属性で持ってくる
<?for($i=0;$i<=1000; $i++) { ?>
    <button type="button" data-action="example<?=$i?>">
<? } ?>

JavaScript

//クリックしたときFormを一つだけ生成してsubmitするだけ。
//hiddenがあったりする場合は、別途切り分けたりappendしたりする。
$('button').on('click', function(){
    var $form = $('<form>', {action: $(this).data('action'), method: 'POST'});
    $form.appendTo('body');
    $form.submit();
});

※わざわざ$formをbodyに入れてる理由はIE対策です。詳しくはこちら