Question

我有一个div元素

  <div id="progressbar1"></div>

然后通过jquery我宣布一个函数

$(function() {
    $("#progressbar1").increment({target:200});
});

jQuery.fn.extend({
    increment:function(obj){
        console.log($(this).children().attr("value-now"));
        var current_val=$(this).children().attr("value-now");
        var max_val=obj.target||$(this).children().attr("value-max");
        if(current_val<max_val)
        {
            current_val++;
            var widthp=current_val/max_val;
            widthp=widthp*100;
            $(this).children().width(widthp.toFixed(0)+"%");
            setTimeout(increment,100);
        }
    }
});

但是由于SetTimeout函数错误即将到来函数增量未定义。如果我删除setTimeout增量工作正常。所以我想知道Jquery.fn.extend是否与setTimeout一起工作？

Answer 1

由于setTimeout只是JavaScript，jQuery也只是JavaScript，是的，你可以在jQ方法中使用它。

您正在引用名为increment的内容作为在setTimeout行中运行的函数。但是，您尚未定义任何名为increment的函数。

increment是您在jQuery原型上定义的方法，因此请将setTimeout行替换为：

var $this = $(this);
setTimeout(function () {
    $this.increment(obj);
}, 100);

这是您的代码的完整版本，有一些清理（未经测试）：

jQuery.fn.extend({
    increment: function (obj) {
        return this.each(function () {
            var $this = $(this),
                children = $this.children(),
                current_val = children.attr('value-now'),
                max_val = obj.target || children.attr('value-max'),
                widthp;

            if (current_val < max_val) {
                current_val++;
                // you'll probably want to update `children.attr('value-now')` here
                widthp = (current_val / max_val) * 100;
                children.width(widthp.toFixed(0) + '%');

                setTimeout(function () {
                    $this.increment(obj);
                }, 100);
            }
        });
    }
});

$(function() {
    $("#progressbar1").increment({target:200});
});

Answer 2

现在increment没有在任何地方定义。你需要的是调用$.fn.increment方法。另一种正确的方法是使用$.proxy：

setTimeout($.proxy(this.increment, this), 100);

Jquery中的setTimeOut函数是否与Jquery.fn.extend（{}）一起使用;

2 个答案: