Question

这是一个功能：

function rollImgOnSwipe(direction) {
    changeDirection(direction);
    rollImage(direction);
}

第一个被调用的函数（changeDirection(direction);）应该在屏幕的左侧或右侧放置一个div，具体取决于其参数的值。第二个（rollImage(direction);）是使div从左向右或从右向左移动，具体取决于第一个函数放置它的位置。

好吧，它似乎首先调用rollImage然后调用changeDirection，因为为了将div放在另一侧需要多次调用rollImgOnSwipe。

向您解释此问题的最佳方式是向您展示 - 运行代码段并尝试使用prev和next按钮在div之间切换，看看它们的行为方式。

＆＃13;

var nextBtn = document.getElementById('next'),
                prevBtn = document.getElementById('prev'),
                shown = document.getElementsByClassName('shown')[0],
                hidden =  document.getElementsByClassName('hidden')[0];

            function rollImage(direction) {
                shown.classList.remove("shown");
                shown.classList.add("hidden");

                hidden.classList.remove("hidden");
                hidden.classList.add("shown");

                shown = document.getElementsByClassName('shown')[0];
                hidden = document.getElementsByClassName('hidden')[0];

                changeDirection(direction);
            }

            function rollImgOnSwipe(direction) {
                changeDirection(direction);
                rollImage(direction);
            }

            function changeDirection(direction) {
                hidden.style.left = (105 * direction) + "%";
                shown.style.left = 0;
            }

            nextBtn.addEventListener('click', function(){ rollImgOnSwipe(1); });
            prevBtn.addEventListener('click', function(){ rollImgOnSwipe(-1); });

＆＃13;

.img {
            position: absolute;
            display: block;

            width: 80px;
            height: 30px;

            border-style: solid;
            border-color: red;
            border-width: 5px;
        }

        .shown{
            left: 0;
            transition: left .6s ease, transform .6s ease;
        }

        .hidden{
            left: 105%;
        }

        .img-wrapper{
            position: relative;

            width: 80px;
            height: 30px;
            padding: 30px;

            white-space: nowrap;
            overflow: hidden;
        }

＆＃13;

<button id="prev">prev</button>

<div class="img-wrapper">
    <div class="img shown"></div>
    <div class="img hidden"></div>
</div>

<button id="next">next</button>

＆＃13;

要解决此问题，请在rollImage中使用setTimeout函数调用rollImgOnSwipe之前让编译器等待一段时间。

现在该程序按预期工作：

＆＃13;

var nextBtn = document.getElementById('next'),
    prevBtn = document.getElementById('prev'),
    shown = document.getElementsByClassName('shown')[0],
    hidden =  document.getElementsByClassName('hidden')[0];

function rollImage(direction) {
    shown.classList.remove("shown");
    shown.classList.add("hidden");

    hidden.classList.remove("hidden");
    hidden.classList.add("shown");

    shown = document.getElementsByClassName('shown')[0];
    hidden = document.getElementsByClassName('hidden')[0];

    changeDirection(direction);
}

function rollImgOnSwipe(direction) {
    changeDirection(direction);
    setTimeout(function() { rollImage(direction); }, 50);
}

function changeDirection(direction) {
    hidden.style.left = (105 * direction) + "%";
    shown.style.left = 0;
}

nextBtn.addEventListener('click', function(){ rollImgOnSwipe(1); });
prevBtn.addEventListener('click', function(){ rollImgOnSwipe(-1); });

＆＃13;

.img {
    position: absolute;
    display: block;

    width: 80px;
    height: 30px;

    border-style: solid;
    border-color: red;
    border-width: 5px;
}

.shown{
    left: 0;
    transition: left .6s ease, transform .6s ease;
}

.hidden{
    left: 105%;
}

.img-wrapper{
    position: relative;

    width: 80px;
    height: 30px;
    padding: 30px;

    white-space: nowrap;
    overflow: hidden;
}

＆＃13;

<button id="prev">prev</button>

<div class="img-wrapper">
    <div class="img shown"></div>
    <div class="img hidden"></div>
</div>

<button id="next">next</button>

＆＃13;

我的问题是：

问题是什么？为什么通过让编译器等待来修复它？

Javascript在移动div时遇到问题

0 个答案: