Jquery Pテキストスワップで遅延を追加

Question

$(document).ready(function() { 
    $("p").on("click", function() { 
     var el = $(this); 
     if (el.text() == el.data("text-swap")) { 
      el.text(el.data("text-original")); 
     } else { 
      el.data("text-original", el.text()); 
      el.text(el.data("text-swap")); 
     } 
    }); 
}); 

このjQueryコードに遅延を追加することは可能ですか？

Answer 1

使用setTimeout

は、タイマーが満了した後に一度の機能やコードの指定部分を実行し、タイマーを設定します。

$(document).ready(function() { 
    $("p").on("click", function() { 
     var el = $(this); 
     setTimeout(function() { 
      if (el.text() == el.data("text-swap")) { 
       el.text(el.data("text-original")); 
      } else { 
       el.data("text-original", el.text()); 
       el.text(el.data("text-swap")); 
      } 
     }, 1000); 
    }); 
}); 

Answer 2

$(document).ready(function(){ 
var TIMEOUT = 1000 // 1 second 
$("p").on("click", function() { 
    var el = $(this); 
    setTimeout(function() { 
     if (el.text() == el.data("text-swap")) { 
      el.text(el.data("text-original")); 
     } else { 
      el.data("text-original", el.text()); 
      el.text(el.data("text-swap")); 
     } 
    }, TIMEOUT); 
}); 
}); 

Answer 3

$(document).ready(function(){ 
     $("p").on("click", function() { 
      var el = $(this); 
      setTimeout(loadfn,1000); 
     }); 
    }); 
    function loadfn() { 
     if (el.text() == el.data("text-swap")) { 
      el.text(el.data("text-original")); 
     } else { 
      el.data("text-original", el.text()); 
      el.text(el.data("text-swap")); 
     } 
    }