如何在淡入淡出功能完成时创建回调函数？

Question

我在 2.5 秒 (0.05x50),

内创建的 fadeOutEffect 函数中淡出 img2

现在问题来了；我想 console.log('fadeOut done') 正好在 img2 完成淡出 时，我想我应该为 [=14 创建一个 callback 函数=] 函数，或者也许当我调用这个函数时，给它一个最后的参数作为 callback 函数（？），这是我已经尝试过但没有成功的方法？我知道使用 jQuery 会很容易，但我想对这种方法使用纯 JavaScript。

我真的不知道我应该如何做到这一点，欢迎任何建议！

let _sliderBox = document.getElementsByClassName('fadeSlider')[0];
    let img1 = new Image();
    img1.src = 'https://via.placeholder.com/150/0000FF';
    _sliderBox.appendChild(img1);
    let img2 = new Image();
    img2.src = 'https://via.placeholder.com/300/FF0000';
    _sliderBox.appendChild(img2);
    function fadeOutEffect(fadeTarget, interval) {
        let fadeEffect = setInterval(function () {
            if (!fadeTarget.style.opacity){
                fadeTarget.style.opacity = 1;
            }
            if (fadeTarget.style.opacity > 0){
                fadeTarget.style.opacity -= 0.05;
            } else {
                clearInterval(fadeEffect);
            }
        }, interval)
    }
    fadeOutEffect(document.querySelector( `.${_sliderBox.className} img:nth-child(2)`), 50 , function () {
        console.log('fadeOut done');
    });

.fadeSlider{
            width: 300px;
            height: 200px;
            position: relative;
            margin: auto;
            box-shadow: 2px 2px 10px gray;
        }
        .fadeSlider img{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

<div class="fadeSlider">
</div>

Answer 1

需要在fadeOutEffect函数中传入回调参数，在clearInterval(fadeEffect)之后调用回调。

let _sliderBox = document.getElementsByClassName('fadeSlider')[0];
    let img1 = new Image();
    img1.src = 'https://via.placeholder.com/150/0000FF';
    _sliderBox.appendChild(img1);
    let img2 = new Image();
    img2.src = 'https://via.placeholder.com/300/FF0000';
    _sliderBox.appendChild(img2);
    // pass the callback as a parameter for fadeOutEffect
    function fadeOutEffect(fadeTarget, interval, callback) {
        let fadeEffect = setInterval(function () {
            if (!fadeTarget.style.opacity){
                fadeTarget.style.opacity = 1;
            }
            if (fadeTarget.style.opacity > 0){
                fadeTarget.style.opacity -= 0.05;
            } else {
                clearInterval(fadeEffect);
                callback()  // call the callback here
            }
           
        }, interval)
        
    }
    fadeOutEffect(document.querySelector( `.${_sliderBox.className} img:nth-child(2)`), 50 , function () {
        console.log('fadeOut done');
    });

您可以为 callback 边界命名任何您认为更适合您的代码的名称。我把它命名为callback是为了让你更容易看到我的修改。

Answer 2

我有2个例子给你。我推荐示例 1 来学习 promises

/* example 1 */
function fadeOutEffect(fadeTarget, interval) {
  return new Promise((resolve,reject)=>{
    let fadeEffect = setInterval(function () {
      if (!fadeTarget.style.opacity){
        fadeTarget.style.opacity = 1;
      }
      if (fadeTarget.style.opacity > 0){
        fadeTarget.style.opacity -= 0.05;
      } else {
        clearInterval(fadeEffect);
        resolve();
      }
    }, interval)
  })
}

fadeOutEffect(document.querySelector( `.${_sliderBox.className} img:nth-child(2)`), 50).then(()=>{
  console.log('fadeOut done');
});

/* example 2 */
function fadeOutEffect(fadeTarget, interval,callback) { // add callback as parameter
    let fadeEffect = setInterval(function () {
      if (!fadeTarget.style.opacity){
        fadeTarget.style.opacity = 1;
      }
      if (fadeTarget.style.opacity > 0){
        fadeTarget.style.opacity -= 0.05;
      } else {
        clearInterval(fadeEffect);
        callback() // run callback
      }
    }, interval)
}

fadeOutEffect(document.querySelector( `.${_sliderBox.className} img:nth-child(2)`), 50,()=>{
  console.log('fadeOut done');
});

如何在淡入淡出功能完成时创建回调函数？

How do I create a callback function for when the fading function is done?

javascript

function

callback