Display images in milliseconds

Question

I want to display several pictures with different durations. Duration is 1000ms for 'plus.jpg',400ms for 'mask.jpg',17ms for 'coin_sequence[picture_coin]', and 583ms for the second 'mask.jpg'.

However, sometimes the 'coin_sequence[picture_coin]' shows up sometimes it doesn't. Is this the problem of code or is this caused by the extreme short duration?

display_element.innerHTML = '<img class="jspsych-pre-coin" id="jspsych-pre-coin1" src="plus.jpg"></img>';

    jsPsych.pluginAPI.setTimeout(function() {
    display_element.querySelector('#jspsych-pre-coin1').style.visibility = 'hidden';
    display_element.innerHTML = '<img id="jspsych-pre-coin2" class="jspsych-pre-coin" src="mask.jpg"></img>';
    second_change();
  }, 1000);

};

var second_change = function() {
        jsPsych.pluginAPI.setTimeout(function() {
            display_element.querySelector('#jspsych-pre-coin2').style.visibility = 'hidden';
            display_element.innerHTML = '<img id="jspsych-pre-coin3" class="jspsych-pre-coin" src="'+coin_sequence[picture_coin]+'"></img>';
            third_change();
        }, 400);
};

var third_change = function() {
        jsPsych.pluginAPI.setTimeout(function() {
            display_element.querySelector('#jspsych-pre-coin3').style.visibility = 'hidden';
            display_element.innerHTML = '<img id="jspsych-pre-coin4" class="jspsych-pre-coin" src="mask.jpg"></img>';
            fourth_change();
        },17);
};

var fourth_change = function() {
        jsPsych.pluginAPI.setTimeout(function() {
            display_element.querySelector('#jspsych-pre-coin4').style.visibility = 'hidden';
            fifth_change();
        },583);
};