如何为自定义fadeOutEffect淡隐函数添加执行完成的callback回调

• 你定义的fadeOutEffect函数没有声明第三个参数接收传入的回调函数，也没有在淡隐结束的节点执行回调，因此传入的打印逻辑不会触发。

直接修改fadeOutEffect函数，增加回调参数的接收和执行逻辑即可，修改后的完整JS代码如下：

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);
// 新增第三个参数callback，默认值设为空函数避免未传参时报错
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 = (fadeTarget.style.opacity - 0.05).toFixed(2);
        } else {
            clearInterval(fadeEffect);
            // 淡隐完全结束后执行回调
            callback();
        }
    }, interval)
}
fadeOutEffect(document.querySelector( `.${_sliderBox.className} img:nth-child(2)`), 50 , function () {
    console.log('fadeOut done');
});

如果需要更流畅、性能更好的动画效果，可以用CSS transition配合JS事件实现，代码更简洁：

1. 先给图片加过渡属性：

.fadeSlider img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* 新增过渡配置，和你需要的2.5秒时长匹配 */
    transition: opacity 2.5s linear;
}

2. JS逻辑可以简化为：

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);

// 触发淡隐
img2.style.opacity = 0;
// 监听过渡结束事件执行回调，once参数保证回调只执行一次
img2.addEventListener('transitionend', () => {
  console.log('fadeOut done');
}, { once: true });

内容的提问来源于stack exchange，提问作者TheClassyCoder