"setTimeout" в скрипте перетасовки карт

#javascript #settimeout #puzzle

#javascript #settimeout #Головоломка

Вопрос:

надеюсь, этот вопрос не заставит мою задницу пылать. В настоящее время я работаю над игрой-головоломкой, и у меня есть весь мой базовый код. Теперь, чтобы сделать его более «профессиональным», я хотел бы реализовать функцию для перетасовки всех карт. Что касается алгоритма перетасовки, я хорошо подготовлен, и у меня уже есть один, но, чтобы сделать его более приятным для глаз, я бы хотел, чтобы скрипт останавливался на несколько миллисекунд после каждого успешного обмена картами, вместо того, чтобы показывать головоломку, уже перетасованную после щелчкакнопка, которая и есть то, что происходит сейчас (даже если я уже пытался использовать функцию «setTimeout»).

Мой сценарий следующий, надеюсь, кто-нибудь поможет мне разобраться в этом:

 function shuffleCards() {
    var temp;

    for ( var i=0 ; i<50 ; i  ) {
        setTimeout(function(){ 
            temp = Math.floor((Math.random() * 3)   1);

            if (temp === 1)
                move( "t1" );
            else if (temp === 2)
                move( "t2" );
            else if (temp === 3)
                move( "t3" );           
        } , 500);
    }
}

(К вашему СВЕДЕНИЮ: функция draw() вызывается в конце функции move() )

1. ваш вопрос не заставит вас вспыхнуть, если вы не опубликуете какой-либо html или функцию перемещения, хотя 🙂

2. Ну, я не считаю это необходимым для решения моей проблемы. Все, что мне нужно сделать, это установить интервал паузы между каждой итерацией моего цикла.

Ответ №1:

ваш setTimeout внутренний цикл for выполнит все действия в целом с задержкой в 500 мс.
Попробуйте setInteval вместо setTimeout .

 function shuffleCards() {
        var temp;
        var i=0;
        var shuffle = setInterval(function () {
            if (i < 50) {
                i  ;
                temp = Math.floor((Math.random() * 3)   1);
                if (temp === 1)
                    move("t1");
                else if (temp === 2)
                    move("t2");
                else if (temp === 3)
                    move("t3");
            } else {
                clearInterval(shuffle);
            }
        }, 500);
    }

1. Хорошо, спасибо, я попробую. Только один вопрос о вашем решении: почему вы не использовали цикл for, как я? Это неправильно / бесполезно или что-то в этом роде?

2. ваш setTimeout внутри цикла for будет выполнять все действия в целом с задержкой в 500 мс, если вы не используете закрытие

3. О, спасибо, это где-нибудь задокументировано, чтобы я мог изучить поведение setTimeout ?

4. проверьте это: brackets.clementng.me/post/24150213014 /…

Ответ №2:

Если вы также хотите отложить действия после перетасовки карт, вы можете использовать рекурсивный подход с обратным вызовом в конце:

 function shuffleCardsWait( i, ms, limit, cb ) {
  var temp = Math.floor((Math.random() * 3)   1);
  if (temp === 1)
    move( "t1" );
  else if (temp === 2)
    move( "t2" );
  else if (temp === 3)
    move( "t3" );
  if ( i < limit ) {
    setTimeout( function( ) {
      i  ;
      shuffleCardsWait( i, ms, limit, cb );
    }, ms );
  } else {
   if ( cb ) cb( );
  }
}