setInterval, different intervals for last and one before last element (jsPsych)

Question

I'm trying to modify the script from jsPsych library for linguistic and psychology experiment, here is a code which shows images in row and than user can answer.

You can set the time for how long the images will be visible, but only in group (=same time for every image), but I need to show the last and the one before last image different time. Couldanybody help me how to achieve that?

  var animate_interval = setInterval(function() {
    display_element.html(""); // clear everything
    animate_frame++;

    //zobrazeny vsechny obrazky
    if (animate_frame == trial.stims.length) { 
      animate_frame = 0;
      reps++;
      // check if reps complete //
      if (trial.sequence_reps != -1 && reps >= trial.sequence_reps) {
        // done with animation
        showAnimation = false;
      }
    }

    // ... parts of plugin, showing answers and so on.

  }, 
  3000); // <---------------- how to change this value for the last and one before lastelement?

I don't know if this is enought to help me, but if not, ask me I will try to do the best. Thanks a lot in advance!

Toby Liu · Answer 1 · 2015-11-06T17:05:16.987

Instead of setInterval, you can chain setTimeout callbacks. This will allow you to manipulate the delay between each function call. Here's how I would structure your function, and then implement the logic to determine delays for the final two tests.

var showImage = function(currTest, lastTest) {
    display_element.html(""); // clear everything
    animate_frame++;

    //zobrazeny vsechny obrazky
    if (animate_frame == trial.stims.length) { 
        animate_frame = 0;
        reps++;
        // check if reps complete //
        if (trial.sequence_reps != -1 && reps >= trial.sequence_reps) {
            // done with animation
            showAnimation = false;
        }
    }
    // ... parts of plugin, showing answers and so on.

    // create a wrapper function so we can pass params to showImage
    var wrapper = function() {
        showImage(currTest + 1, lastTest);
    }

    if (currTest === lastTest) {
        setTimeout(wrapper, your_other_desired_delay);
    } else if (currTest - 1 === lastTest) {
        setTimeout(wrapper, your_desired_delay);
    } else if (currTest < lastTest) {
        setTimeout(wrapper, standard_delay);
    }
}

showImage(0, trials.length);

Thanks a lot and I understand your solution, but the problem is, that I'm not able to get from the function how many tests/showing images are remaining or... (I have spent whole evening on that). Whole script in [link](http://pastebin.com/1AeQivBg) — Karolína Vyskočilová, Nov 06 '15 at 08:22
I see. I updated my solution, now the showImage function takes arguments so you can recursively keep track of the which test it is currently on. You need the wrapper function to pass args to the setTimeout callback. What do you think? — Toby Liu, Nov 06 '15 at 17:08
It looks cool, I will try it this evening, and I will let you know, thanks a lot! — Karolína Vyskočilová, Nov 06 '15 at 18:33

score 1 · Accepted Answer · edited May 23 '17 at 11:58

It is possible to use setInterval to show images using different intervals of time. Consider the following:

The control system shows images 1,2,…n-2 using the same interval of time, and shows images n-1,n using another interval of time (“setInterval”, 2015). Figure 1 is a process model of the control system in terms of a Petri Net. For the PDF version of this reply, it is an interactive Petri Net.

Figure 1

The mark for P_1 (m_1) is equivalent to the variable animate_frame. If m_1=0 then no image is shown. If m_1=1 then the first image is shown. If m_1=2 then the second image is shown. And so on. If a total of ten images will be shown, then the initial values are〖 m〗_0=8,〖 m〗_1=0, and〖 m〗_2=2.m_0 is used to control the use of the first interval of time. m_2 is used to control the use of the second interval of time. m_1 is used to show the image.

There are two execution or run logics:

The first execution or run logic (rn1) uses the first interval of time (e.g. one second). It shows images 1 to n-1. After showing image n-1 it removes the interval object, and schedules a new interval object for the second logic of execution.
The second execution or run logic (rn2) uses the second interval of time (e.g. four seconds). It shows the last image and then removes the last image from the display.

There are three ways to show the images. The first method (T_0) combines the display of the next image with incrementing m_1 by 1 and decrementing m_(0 )by 1. The second method (T_1) combines the display of the next image with incrementing m_1 by 1 and decrementing m_2 by 1. The third method (T_2) shows a blank space, removes the last image. At any given instant, none or just one of the computation logic T_0,T_1 and T_2 can occur. When none of the computation logics can occur, the execution logic ends; in other words, the interval object is cleared (e.g. clearInterval()).

Using the Petri Net in Figure 1 as a guide, the computer program for the control system may be organized as follows:

rn1

if (m_0≥1)  {
  // T_0
  m_0=m_0-1
  m_1=m_1+1
  // update image using plugin API
} else if ((m_0==0)  && (m_2≥1))  {
  // T_1
  m_2=m_2-1
  m_1=m_1+1
  // update image using plugin API
  clearInterval(ai);
  ai=setInterval(rn2,4000);
} else
  clearInterval(ai);

rn2

if (m_2≥1)  {
  // T_1
  m_2=m_2-1
  m_1=m_1+1
  // update image using plugin API
} else if (m_2==10)  {
  // T_2
  m_1=m_1-1
  // hide image using plugin API
} else
  clearInterval(ai);

To start the control system:

ai=startInterval(rn1,1000);

Then rn1 will eventually call on st2, and rn2 will eventually end the process. If additional computations are needed (such as display_element.html("")) add them to rn1 and rn2.

References

“setInterval, different intervals for last and one before the last element (jsPsych)” (2015). Stack Overflow. Retrieved on Nov. 5, 2015 from setInterval, different intervals for last and one before last element (jsPsych).

setInterval, different intervals for last and one before last element (jsPsych)

2 Answers2