javascript - Jquery中的setTimeOut函数是否与Jquery.fn.extend({ });一起使用

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 原型(prototype)上定义的方法，因此请将您的 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});
});