Question

我正在尝试与qualtrics.com JS API进行交互并遇到问题，因为下面的代码不会在动画循环结束时停止显示图像。 Qualtrics是一个调查托管网站，一旦调查受访者点击下一个按钮，我基本上需要在下面编码的动画循环上显示的所有图像都消失。 addOnLoad（）函数是qualtrics API的一部分，它正在工作（作为函数的警报部分工作），但我认为remove（imageLinks [i]）有问题;我正在尝试的选项，因为图像在显示时仍然存在。有什么建议？

var imageLinks = ["http://i.imgur.com/iUjHm4e.jpg",
    "http://i.imgur.com/89Bh81C.jpg",
    "http://i.imgur.com/qKecE0F.jpg",
    "http://i.imgur.com/s5LzrE1.jpg",
    "http://i.imgur.com/thRmkE8.jpg",
    "http://i.imgur.com/mjfqeKv.jpg",
    "http://i.imgur.com/w9EpXNq.jpg",
    "http://i.imgur.com/b2rP5RQ.jpg",
    "http://i.imgur.com/NDLm5QQ.jpg",
    "http://i.imgur.com/7nohNKf.jpg",
    "http://i.imgur.com/4Qtz8KB.jpg",
    "http://i.imgur.com/xTwSsBe.jpg",
    "http://i.imgur.com/KwXNQjR.jpg",
    "http://i.imgur.com/5BVvvci.jpg",
    "http://i.imgur.com/bU0jnnD.jpg",
    "http://i.imgur.com/YKy6K6u.jpg",

];

function display(src) {
    var img = document.createElement("img");
    img.src = src;
    //img.style.position = "absolute";
    //img.style.left = "270px";
    //img.style.top = "300px";
    document.body.appendChild(img);
    return img;
}



function remove(img) {
    document.body.removeChild(img);
}



i = 0;

function animation_loop() {
    var im = display(imageLinks[i]);
    setTimeout(function () {
        i++;
        if (i < imageLinks.length) {
            animation_loop();
        remove(im);}
    }, 150);
};

animation_loop();

Qualtrics.SurveyEngine.addOnload(function ()
{
    this.questionclick = function(event,element){
        if(element.type == "radio") {
            alert("Good job choosing an answer!");
            remove(imageLinks[i]);
        }
    }
});

JSFiddle：https://jsfiddle.net/cbjrobertson/o0onrxa1/

Answer 1

您需要清除点击事件的超时;这将阻止内部函数再次触发，打破循环。

对于删除功能，您需要再次传入DOM元素，就像使用循环一样。所以像这样：

var loopTimeout;
var im;

function animation_loop() {
    im = display(imageLinks[i]);
    loopTimeout = setTimeout(function () {
        i++;
        if (i < imageLinks.length) {
            remove(im);
            animation_loop();
        }
    }, 150);
};

Qualtrics.SurveyEngine.addOnload(function ()
{
    this.questionclick = function(event,element){
        if(element.type == "radio") {
            clearTimeout(loopTimeout);
            alert("Good job choosing an answer!");
            remove(im);
        }
    }
});

在用户输入Javascript上停止图像显示

1 个答案: