Функция jQuery attr () не всегда обновляет атрибут img src

Question

Контекст: на моем веб-сайте продукта есть ссылка на приложение веб-запуска Java (в нескольких местах).

Моя цель: запретить пользователям двойной щелчок, i. е. только "огонь" при первом нажатии, подождите 3 секунды, прежде чем снова включить ссылку. При нажатии измените изображение ссылки на то, что означает, что приложение запускается.

Мое решение работает, за исключением того, что изображение не обновляется надежно после нажатия. Закомментированные выходные данные отладки дают мне правильное содержимое, и обратные вызовы при наведении курсора мыши также работают правильно.

Смотрите его здесь: http://www.auctober.de/beta/ (нажмите кнопку «Стартовый джет»).

Кстати: если у кого-то есть лучший способ вызывать функцию с задержкой, чем эта пустышка, дайте мне знать.

JavaScript:

<script type="text/javascript">
      <!--
        allowClick = true;
        linkElements = "a[href='http://www.auctober.de/beta/?startjnlp=true&rand=1249026819']";
        $(document).ready(function() {
            $('#jnlpLink').mouseover(function() {
                if ( allowClick ) {
                    setImage('images/jetzt_starten2.gif');
                }
            });
            $('#jnlpLink').mouseout(function() {
                if ( allowClick ) {
                    setImage('images/jetzt_starten.gif');
                }
            });

           $(linkElements).click(function(evt) {
                if ( ! allowClick ) {
                    evt.preventDefault();
                }
                else {
                    setAllowClick(false);
                    var altContent = $('#jnlpLink').attr('altContent');
                    var oldContent = $('#launchImg').attr('src');
                    setImage(altContent);
                    $(this).animate({opacity: 1.0}, 3000, "", function() {
                        setAllowClick(true);
                        setImage(oldContent);
                    });
                }
            });

        });

        function setAllowClick(flag) {
            allowClick = flag;
        }
        function setImage(imgSrc) {
            //$('#debug').html("img:"+imgSrc);
            $('#launchImg').attr('src', imgSrc);
        }
      //-->
</script>

Answer 1

Задержка может быть достигнута с помощью функции setTimeout

setTimeout(function() { alert('something')}, 3000);//3 secs

А для вашей проблемы с src попробуйте:

$('#launchImg')[0].src = imgSrc;

Answer 2

... или просто используйте:

$(this).animate({opacity: '1'}, 1000);

везде, где вы хотите в своем коде, где $ (this) - это то, что уже имеет непрозрачность = 1 ... что означает, что все на первый взгляд останавливается на одну секунду. Я использую это все время.

Answer 3

Добавьте эту переменную вверху вашего скрипта:

var timer;

Реализовать эту функцию:

function setFlagAndImage(flag) {
    setAllowClick(flag);
    setImage();
}

А затем замените фиктивную анимацию на:

timer = window.setTimeout(function() { setFlagAndImage(true); }, 3000);

Если что-то еще происходит, и вы хотите остановить таймер, вы можете просто позвонить:

window.clearTimeout(timer);

Answer 4

Проверьте плагин BlockUI . Похоже, это может быть то, что вы ищете.

Здесь вы найдете хорошую демонстрацию .