Question

我一直在修补将图像粘贴到浏览器中，通过剪贴板提取数据......

我已经设法创建一个合理的幻灯片脚本工作，但问题是幻灯片之间的时间不稳定...我不确定我错过了什么......

当前行为：

可以从剪贴板将图像粘贴到幻灯片中。新图像将显示为主视图下方的图块。
单击图块会选择要在主视图中显示的图块。
双击瓷砖会从瓷砖板上移除瓷砖。
选择一个磁贴后，它会自动插入到幻灯片中并开始幻灯片放映。
点击主视图屏幕将暂停幻灯片显示。再次单击它将恢复它。

问题是，多个图像之间的时间不稳定，并且不会在图像之间保持2000毫秒...

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body id="ourDoc" contenteditable="true" onpaste="handlepaste(event);">
<div class="slideshow_area" style="width: 300px; height: 200px; border: 1px solid black; background-color: black; margin-top: 10px; margin-left: 10px; background-size: cover;">
    <div class="noImg" style="width: 130px; height: 25px; margin: 25% auto; color: white;">No Image Selected</div>
    <div class="pause" style="width: 300px; height: 200px; margin-top: -176px; left: 0px; position: relative; color: white; font-size: 96px; text-align: center;" onclick="($(this).css('opacity')==1)?pauseSlideShow():($('.pause').css('opacity',0)||playSlideShow());">||</div>

</div>
<div class="thumbnail_area" style="width: 300px; margin-top: 10px; margin-left: 10px;"></div>

    <script src="./jquery.js" type="text/javascript"></script>
    <script>
function handlepaste(evt) {
    var cbData;
    // get Clipboard data
    if (evt.clipboardData) {
        cbData = evt.clipboardData;
    } else if (window.clipboardData) {
        cbData = window.clipboardData;      
    }
    // Stop image being pasted.
    if (evt.preventDefault) {
        evt.stopPropagation();
        evt.preventDefault();
    }
    imgArr = cbData.getData('text/html').split(" "); // Grab data for image
    imgSrc = imgArr[1].split("=")[1]; // get source of image
    imgSrc = imgSrc.replace(/\"/g, "");

    newImgNode = '<div class="tile" style="height: 80px; width: 80px; outline: 5px solid rgba(0,0,0,0); background-image:url('+imgSrc+'); background-size: cover; float: left; margin-right: 20px; margin-bottom: 20px;" onDblClick="$(this).remove();" onClick="$(this).toggleClass(\'sel\'); $(\'.noImg\').css(\'opacity\', 1-($(\'.sel\').length>0));($(\'.sel\').length>0)?playSlideShow():stopSlideShow();"></div>';

    $(".thumbnail_area").append(newImgNode);
    delete newImgNode;
}
tileIndex = null;
function playSlideShow(){
    if($(".pause").css("opacity") < 1){
        numTiles = $(".sel").length;
        (numTiles>0)&&$(".pause").css("opacity",0);
        (numTiles!=null)&&(tileIndex = tileIndex || 0);
        imgVal = $(".sel:eq("+tileIndex+")").css("backgroundImage");
        $(".slideshow_area").css("background-image",imgVal);
        delete imgVal;
        tileIndex++;
        tileIndex%=numTiles;
        (numTiles<1)&&(clearTimeout("playIt")||stopSlideShow());
        delete numTiles;
        if($(".sel").length>0){
            setTimeout("playSlideShow();",2000);
        }
    }
}
function pauseSlideShow(){
    $(".pause").css("opacity",1);
}
function stopSlideShow(){
    $(".slideshow_area").css("background-image","none");
    $(".pause").css("opacity",0);
    $(".noImg").css("opacity",1);   
}

$(".pause").css("opacity", +($(".slideshow_area").hasClass("play")));
</script>
<style>
    .sel {outline: 5px solid orange !important;}
</style>
</body>
</html>

任何人都有任何我缺少的线索吗？

Answer 1

最好使用setInterval定期更改图像。你不知道什么时候你的回调将被实际执行，因为当超时/间隔触发时，唯一发生的事情是你的回调被附加到javascript任务队列但是当前正在执行的任务（如果有的话）没有停止。您的回调等待该函数结束执行。

使用间隔也会发生同样的情况，但是从上次触发的时间间隔开始计算。有了超时，你会在你的代码被实际执行时开始计算，这是你的超时加上javascript循环到达你的回调并执行它的随机时间（你的不稳定行为的第一个原因）。

可能的第二个原因是，在下面的代码中，您试图清除字符串（“playIt”），就像它是超时一样：

function playSlideShow(){
    if($(".pause").css("opacity") < 1){
        ...
        (numTiles<1)&&(clearTimeout("playIt")||stopSlideShow());
        ...
        if($(".sel").length>0){
            setTimeout("playSlideShow();",2000);
        }
    }
}

clearTimeout（）需要一个包含超时对象的变量来有效地清除它。请参阅documentation。

你可能会这样做：

var myTimeout;
function playSlideShow(){
    if($(".pause").css("opacity") < 1){
        ...
        (numTiles<1)&&(clearTimeout(myTimeout)||stopSlideShow());
        ...
        if($(".sel").length>0){
            myTimeout = setTimeout("playSlideShow();",2000);
        }
    }
}

（不确定它是否有效。但至少这种方式超时定义和清除是正确的。）

为什么我的幻灯片不稳定？（时间问题）

1 个答案:

为什么我的幻灯片不稳定？ （时间问题）

1 个答案:

为什么我的幻灯片不稳定？（时间问题）