Question

我正在构建我的第一个jquery插件，并希望有一些提示可以做得更好。我的代码中也有一个错误，我想摆脱它。我正在尝试通过我的ajax成功回调中的setTimeout刷新我的小部件的内容。它正在工作（没有参数）但我喜欢传递一个像这样的论点

setTimeout(refresh(o.refresh), 5000);

我不确定是这样做的，但我遵循了我的直觉。我在firebug中有以下错误

无用的setTimeout调用（参数周围缺少引号？）

我不明白这个错误，因为提供给refresh函数的参数是一个变量。我需要传递一个参数来查看事件是由用户双击（窗口小部件切换打开）还是通过setTimeout方法触发（窗口小部件是打开的，所以不需要关闭它）。我不确定我想做的事情是否可能。我可以通过为刷新选项添加条件ajax调用来解决我的问题，但我不想要重复的代码。希望任何人都可以给我一些提示'n'提示，不仅是因为我的错误，而且一般（插件开发）。作为jquery的首发，我不确定我的代码是否是传统的。

和平

        /**
 * @author kasperfish
 */
(function($){
    $.fn.extend({

    widgetIt: function(options) {

        var defaults = {
            title: 'Widget Title',
            load:'',
            top: '50px',
            left: '400px',
            width: '500px',
            afterLoad: function(){},
            reload:false,
            refresh:true
        };

        var options = $.extend(defaults, options);
        var o=options;

        return this.each(function() { 

              var container=$(this).css({'z-index':3, display:'inline-block',position:'absolute',top:o.top,left:o.left,'max-width':o.width})
                            .addClass('widget_container');
              var header = $('<div></div>')
                            .addClass('ui-widget-header widgethead')
                            .css({'min-width':'130px'});

              var title =$('<div></div>').addClass("w_tit").html(o.title);
              var content =$('<div></div>')
                           .addClass("w_content")
                           .hide();


              //append
              $(title).appendTo(header) ;
              $(header).appendTo(container) ;
              $(content).appendTo(container) ;

              //make draggable
              $(container).draggable({
                cancel: 'input,option, select,textarea,.w_content',
                opacity: 0.45,
                cursor: 'move'
                });

              //binding
                var display=$(content).css('display'); //check if widget is open=block or closed=none
                var reload=true ; //set initially to true->reload content every time widget opened
                var refreshcontent=false;
              $(header).dblclick(function refresh(refreshcontent){

                if(!refreshcontent)//if it's not a refresh
                $(content).fadeToggle();//open or close widget
                //[show ajax spinner]

                    if(display="block" && reload){//only load on widget open event

                      $.ajax({
                        url: o.load,
                        context: content,
                        success: function(data){
                        $(content).html(data);
                        reload=false;
                        //[hide ajax spinner]
                        setTimeout(refresh(o.refresh), 5000);//refresh every 5s
                        o.afterLoad.call();},
                        error: function(){
                        // error code here
                        }
                        }); 
                    }else if(display="none"){reload=o.reload;}//set reload true or false
              });


             $(header).click(function (){
                $(container).topZIndex('.widget_container');

             });
             //close all open widgets and animate back to original position
             $('#deco').click(function (){
                        $(content).hide();
                        $(container).animate({ "left": o.left, "top": o.top}, "slow");

             });  
        });
    }
});
})(jQuery);

Answer 1

您将refresh(o.refresh)的结果传递给setTimeout，这就是为什么它没用。相反，当refresh(o.refresh)触发时，您需要传递一个调用setTimeout的函数：

setTimeout(function () { refresh(o.refresh); }, 5000);

至于使您的代码更好的“提示”，我建议您在Code Review上提出问题的一部分，这更适合此类问题。

我的第一个jquery插件：需要提示做得更好+超时问题

1 个答案: