Question

我正在尝试新的东西。我总是制作具有相同功能的html页面，所以我想使用我制作的JQuery插件简化我的工作。但这是我第一次尝试这个并且我已阅读关于如何做到这一点的许多网页，我不知道什么不起作用。这是 Emu.js文件：

   $.fn.loop = function(time,callback) {
       setInterval(this,time);
       if(callback !== 'undefined' && typeof(callback) == "function") {
           callback
       }
   };

这是Emu.html文件：

   <!DOCTYPE html>
   <html>
   <head>
       <script src="JQuery.js" ></script>
       <script src="Emu.js" ></script>
   </head>
   <body onload="do_it()">
       <p></p>
       <script type="text/javascript">
           function hello() {
               $("p").append("Hello!"+"<br>")
           }

           function do_it() {
               $(hello).loop(2000)
           }
       </script>
   </body>
   </html>

Answer 1

jQuery插件/方法（就像.show()）期望jQuery元素对象作为参考：$("p").loop()
将setInterval内容放在if
使用$.proxy引用正确的jQuery this元素对象（否则this将指向window内的setInterval对象）
在hello()内部随意使用jQuery的$(this)原因this引用HTMLParagraphElement上的JS引用"p"

$.fn.loop=function(time,callback) {
  if(callback !== 'undefined' && typeof callback === "function") {
    setInterval($.proxy(callback, this), time);
  }
};


jQuery(function($) { // Use DOM ready instead of <body onload="do_it()">

  function hello(){
    $(this).append("Hello!<br>");
  }

  $("p").loop(2000,hello);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>

您可以避免自己的一些错误，即使用WindowTimers.setInterval，其中第一个参数应该是回调function setIntarval(fn, time)。 this在您的案例中不是一个函数。

试图使JQuery插件无法正常工作

1 个答案: