javascript - 如何通过按键输入重新触发超时功能

Question

有一段时间我一直在努力处理以下代码:

$(document).ready(function(){
     keyBind();
});
var set = [];
var start = 0;
var total = 3;
var timeout = 1000;
function displayImages(i, total){
    var pixBox = $('#picture-box');
    var imgPre = 'resources/exhibit-';
    var imgExt = '.png';
    var sndExt = '.wav';
    var imgSrc = '<img class="image" src="' + imgPre + i + imgExt +'">';
    var sndSrc = new Audio(imgPre + i + sndExt);
    var magic = ((i+1)%total) + ',' + total;

    sndSrc.play();
    pixBox.append(imgSrc);

    var sT = setTimeout('displayImages(' + magic + ')', timeout);
    set.push(sT);

    if(sT >= total+1){ 
        sndSrc.pause();
    }
    if(sT === total+1){     
        clearTimeout(sT);               
        // $('img').remove();
        $('img:not(:last-child)').remove();
    }
    return false;
}
function keyBind(){
    $(document).keydown(function(e) {
        switch (e.which) {
            case 75: //k
                displayImages(start, total); 
                break;
            case 80: //p
                clearTimeout(set);
                break;
            default:
                return;
        }
        e.preventDefault();
    });
}

这是一种非常原始的幻灯片，每张图片/幻灯片都附带声音文件。如您所见，它是由键盘输入(keyBind 函数)控制的。一切都很好，但这只是第一次。当我重新触发它时，timeOut 函数正在执行它的工作，并且两个 if 语句(第一个负责在最后一个文件之后剪切声音，第二个负责将图像包装回第一个文件)显示一个接一个)正在启动，一切正常。

也就是说，直到我想再次重新启动序列，而不刷新。如果我这样做，声音文件就会静音，图像序列就会变成无限循环。

我已经尝试将序列的开始和停止划分为单独的函数，我尝试在序列开始时清除 div 并重置声音，并且我确实尝试在开始时重置 timeOut也。一切都无济于事。你们，SO 的好人和亲爱的人们，知道我的代码有什么问题并且可以阐明它吗？这将是一个救星。

编辑

看起来setTimeout(sT)不起作用。我在它后面放了一个 console.log ，并且 sT 不为 0，它仍然具有上次迭代的 ID。可能是什么原因？我做错了什么？

Answer 1

一些问题:

您使用 setTimeout 返回的值，就好像它具有某种含义(增量)，但是实际值取决于实现。您应该仅将其用于将其传递给 clearTimeout，但不适用于以下情况:

if(sT >= total+1) 

也不清楚为什么要将它们添加到 set 数组中，因为只有最后一个真正悬而未决。其他的都已经过期了，因为你“链”调用setTimeout。

您在设置超时后立即清除超时，而在设置超时时没有什么是您不知道的。那么，当您要立即清除时，为什么不避免使用 setTimeout 呢？

此外，clearTimeout 的参数应该是一个数字。它不能是像 set 这样的数组:

        case 80: //p
            clearTimeout(set); 

您有一个start变量，但在执行(i+1)%total时忽略它。

虽然这不是问题，但您应该避免使用字符串作为 setTimeout 的参数，因为它与 eval 一样邪恶。

以下是修复了其中几个问题的代码版本:

$(document).ready(function(){
     keyBind();
});

var sT = -1;
var total = 3;
var timeout = 1000;

function displayImages(i){
    var pixBox = $('#picture-box');
    var imgPre = 'resources/exhibit-';
    var imgExt = '.png';
    var sndExt = '.wav';
    var imgSrc = '<img class="image" src="' + imgPre + i + imgExt +'">';
    var sndSrc = new Audio(imgPre + i + sndExt);
    i = (i+1)%total;

    sndSrc.play();
    pixBox.append(imgSrc);

    if(i == 0){
        sT = -1;
        sndSrc.pause();
        $('img:not(:last-child)').remove();
    } else {
        sT = setTimeout(displayImages.bind(null, i), timeout);
    }
    return false;
}

function keyBind(){
    $(document).keydown(function(e) {
        switch (e.which) {
            case 75: //k
                displayImages(0); 
                break;
            case 80: //p
                clearTimeout(sT);
                break;
            default:
                return;
        }
        e.preventDefault();
    });
}

我不太确定你什么时候真的想停止声音并删除图像(除了一个)。您可能仍需要稍微更改此代码。