Я пытаюсь увеличить переменную, когда видео достигает ключевой точки

Question

Я использую flow-player, и когда мое видео достигает определенной ключевой точки, я запускаю оповещение со значением i переменная:

<script type="text/javascript"> 
    flowplayer(function (api, root) {
      api.bind("cuepoint", function () {
        api.pause();
        var i = 0 ;
        $(".quiz").slideDown(2000);
        $("."+i).fadeIn(2000);
        do {
            i++;
            alert(i);
            }
        while (i < 3);
        $('.done').click(function () {
        api.play();
        $(".quiz").slideUp(2000);
    });
      });
    });
</script>

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

Прямо сейчас значение i = 1 все время во всех оповещениях, когда видео достигает ключевой точки!

Answer 1

Приносить i вне функции, как показано ниже:

<script type="text/javascript"> 
    flowplayer(function (api, root) {
      var i = 0 ;
      api.bind("cuepoint", function () {
        api.pause();

        $(".quiz").slideDown(2000);
        $("."+i).fadeIn(2000);
        do {
            i++;
            alert(i);
             break;
            }
        while (i < 4);
        $('.done').click(function () {
        api.play();
        $(".quiz").slideUp(2000);
    });
      });
    });
</script>

Примечание:- вы реинициализируете i снова и снова, и именно поэтому 1 всегда приходит в качестве выхода

Answer 2

Я понял, что я не вырвался из цикла, и да, как сказал Анант, мне нужно инициализировать i перед компоновщиком flowplayer, вот рабочий код:

<script type="text/javascript"> 
    flowplayer(function (api, root) {
        var i = 0 ;
      api.bind("cuepoint", function () {
        api.pause();

        $(".quiz").slideDown(2000);
        do {
            i++;
            alert(i);
            break;
            }
        while (i < 4);
        $('.done').click(function () {
        api.play();
        $(".quiz").slideUp(2000);
    });
      });
    });
</script>