jQuery问题：延迟替换div的innerHTML失效如何解决？

你尝试用jQuery实现「淡出→替换内容→淡入」的过渡效果，无延迟的版本能正常运行，但加了setTimeout之后就失效了对吧？咱们来拆解一下问题出在哪。

核心问题1：this的指向丢失 #

你在延迟替换的代码里，setTimeout的回调函数中用了$(this).find('#title1')，这里的this已经不是你预期的jQuery上下文了！

在JavaScript的setTimeout回调中，this默认指向window对象，而非调用$.replaceDelayed的上下文。所以$(this).find('#title1')根本找不到目标元素，替换内容的操作自然就没效果了。

核心问题2：选择器语法错误 #

你的按钮绑定代码写了$("replace-btn")，但按钮的类名是replace-btn，类选择器前面必须加.，应该写成$(".replace-btn")，不然jQuery找不到这个按钮，点击事件根本不会触发。

修复方案 #

方案1：提前保存this的指向 #

在$.replaceDelayed函数开头，先把当前的this存成变量，这样在setTimeout回调里就能正常使用了：

$(document).ready(function() {
 $.replaceDelayed = function() {
  var $this = $(this); // 保存当前this的指向
  $('#current-title').css("opacity", "0");
  setTimeout(function() {
   $('#current-title').html($this.find('#title1').html()); // 用保存的$this
  }, 500);
  setTimeout(function() {
   $('#current-title').css("opacity", "1");
  }, 1000);
  setTimeout(function() {
   alert('Title has been replaced.');
  }, 1000);
 };
 $(".replace-btn").click(function() { // 修正类选择器
  $.replaceDelayed();
 });
});

方案2：使用ES6箭头函数（更简洁） #

箭头函数不会绑定自己的this，会继承外层作用域的this，这样就不用额外存变量了：

$(document).ready(function() {
 $.replaceDelayed = function() {
  $('#current-title').css("opacity", "0");
  setTimeout(() => { // 箭头函数
   $('#current-title').html($(this).find('#title1').html());
  }, 500);
  setTimeout(() => {
   $('#current-title').css("opacity", "1");
  }, 1000);
  setTimeout(() => {
   alert('Title has been replaced.');
  }, 1000);
 };
 $(".replace-btn").click(function() { // 修正类选择器
  $.replaceDelayed();
 });
});

额外优化建议 #

其实jQuery本身有fadeOut()和fadeIn()方法，比手动改opacity更方便，还能利用回调函数保证动画顺序，不用依赖固定的延迟时间（比如动画时长调整后，延迟时间不用跟着改）：

$(document).ready(function() {
 $.replaceDelayed = function() {
  var $this = $(this);
  $('#current-title').fadeOut(300, function() {
   // 淡出完成后再替换内容
   $(this).html($this.find('#title1').html());
   // 替换完成后淡入
   $(this).fadeIn(300);
   alert('Title has been replaced.');
  });
 };
 $(".replace-btn").click(function() {
  $.replaceDelayed();
 });
});

这样动画顺序更可靠，代码也更简洁。

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