0

特定のページ更新イベントで発生するように、画像アニメーション コードを設定しています。期待どおりに動作します。更新が失敗する可能性があり、アニメーションを永遠に再生したくないので、ユーザーがどこかをクリックするかキーを押すたびに停止する必要があります。キープレスイベントの場合、それは機能しており、これは次のとおりです。

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function RefreshImg() {
            var src = $('#ocupado').attr('src');
            $('#ocupado').attr('src', src);
        }

        function processando() {
            $processando = $('#processando');
            $processando.css('z-index', '100').fadeTo('fast', 0.5);
            var left = Math.floor(($processando.outerWidth() - 32) / 2);
            var top = Math.floor(($processando.outerHeight() - 32) / 2);
            $('#ocupado').css('left', left).css('top', top);
            setTimeout(RefreshImg, 50);
            $(document).on('keypress', (function () {
                $processando.fadeOut('fast').css('z-index', '-100');
                $(this).off('keypress');
            }));
        }
    </script>
</head>
<body>
    <div id="processando" style="border:0;position:fixed;display:none;z-index:-100;width:100%;height:100%;background:black;top:0px;left:0px;">
    <img id="ocupado" src="http://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif" width="32" height="32" style="position:relative;" border="0" alt="imagem de espera" />
    </div>
    <select id="mySelect"><option>1</option><option>2</option></select>
    <script type="text/javascript">
        $('#mySelect').change(processando);
    </script>
</body>
</html>

問題は、クリック イベントを含めるようにコードを変更したときです。

            $(document).on('keypress click', (function () {
                $processando.fadeOut('fast').css('z-index', '-100');
                $(this).off('keypress click');
            }));

これで、ユーザーが選択オプションを変更するとすぐにアニメーションが開始および停止します。変更イベントの後にクリック イベントが発生するかのようです。選択変更後の最初のクリックでのみアニメーションを停止する方法は?

4

1 に答える 1