在定时器和 post ajax 请求之间传递 objects（匿名函数）

Question

我在这个话题上苦苦思索了很长时间，就是不成功！

我需要将 object 传递给 &.post（WordPress 已处理 AJAX）请求，但我不知道如何使用常规变量正确地完成它；相反，我不得不调用 $(document) 并迭代它的 DOM 元素（非常丑陋和缓慢）。

我该如何更正此代码，以便能够将标题变量一直传递到 post 数据，而不是使用 $(document).find('#sections_title').val() request?

请说明如何正确执行此操作。

(function ($) {
    var title = $('#sections_title');
    var timeout = 2000;

    var delay = (function () {
        var timer = 0;

        return function (callback, ms) {
            clearTimeout(timer);
            timer = setTimeout(callback, ms);
        };
    })();

    title.keyup(function () {

        // i would like to have variable here, that grabs the $(this).val()
        // and use this variable to pass to the data
        // var value = .......

        delay(function () {
            $.post(
                ajaxurl,
                {
                    'action': 'add_foobar',
                    'data': $(document).find('#sections_title').val()
                    // instead I would like:
                    // 'data': value
                },
                function(response){
                    alert('The server responded: ' + response);
                }
            );

        }, timeout);
    })();
})(jQuery);

Answer 1

您可以在 window object 上明确设置它。在浏览器中，全局对象与 window 对象相同，但某些环境除外，例如 node.js.

(function($) {
    window.title = $('#sections_title');
    var timeout = 2000;

    var delay = (function() {
        var timer = 0;

        return function(callback, ms) {
            clearTimeout(timer);
            timer = setTimeout(callback, ms);
        };
    })();

    title.keyup(function() {    
        delay(function() {
            $.post(
                ajaxurl, {
                    'action': 'add_foobar',
                    'data':  window.title
                },
                function(response) {
                    alert('The server responded: ' + response);
                }
            );

        }, timeout);
    })();
})(jQuery);

Answer 2

对于您的情况，这应该是最简单的方法。将 val 作为对象绑定到回调。然后在需要使用时将其转换为字符串。

    delay(function () {
        $.post(
            ajaxurl,
            {
                'action': 'add_foobar',
                'data': String(this)
                // instead I would like:
                // 'data': value
            },
            function(response){
                alert('The server responded: ' + response);
            }
        );

    }.bind(Object($(this).val())), timeout);

或者这里是完整的代码

(function ($) {
    var title = $('#sections_title');
    var timeout = 2000;

    var delay = (function () {
        var timer = 0;

        return function (callback, ms) {
            clearTimeout(timer);
            timer = setTimeout(callback, ms);
        };
    })();

    title.keyup(function () {

        // i would like to have variable here, that grabs the $(this).val()
        // and use this variable to pass to the data
        // var value = .......

        delay(function () {
            $.post(
                ajaxurl,
                {
                    'action': 'add_foobar',
                    'data': String(this)
                    // instead I would like:
                    // 'data': value
                },
                function(response){
                    alert('The server responded: ' + response);
                }
            );

        }.bind(Object($(this).val())), timeout);
    })();
})(jQuery);

在定时器和 post ajax 请求之间传递 objects（匿名函数）

Passing objects between timers and post ajax requests (anonymous functions)

javascript

ajax

post

anonymous-function

settimeout