javascript - 点击事件内的回调函数

Question

当用户使用 jQuery 单击按钮时，我想调用一个又一个函数。我在点击事件中使用了回调函数，如下所示:

$(document).ready(function() {
var form = $('form');

function scaleUp(callback){

    var pageWidth = $('.container').width();
    var formWidth = form.width();
    var scaleX = pageWidth*.8 / formWidth;
    var scaleamount; 

    if (pageWidth * .8 < 1200){

        scaleamount = 1.2;
    }else if(pageWidth * .8 < 1900){

        scaleamount = 1.8;
    }
    else{
        scaleamount = 2;
    }

    var scaleY = scaleX / scaleamount;

    form.attr('style', 'transform:scale(' + scaleX + ',' + scaleY + ');transition : transform 1.5s ease;'
     );
    return true;
};

function getPos(){
    var formTop = form.position().top;
    var formLeft = form.position().left;
    console.log(formLeft);

};

$('.button').click(function(){

    scaleUp(getPos());

});

});

但是，我总是得到旧的位置值，而不是表单转换后的新位置值。有什么想法吗？

JSfiddle:https://jsfiddle.net/k3j910ny/1/

Answer 1

更好的答案

常规回调不起作用，因为 CSS 转换是异步的。

旧的答案使用了 jQuery promise 。不过，您可以将一个名为 transitionend 的事件添加到表单中。基本上，当 CSS 转换完成时，它会发出一个 transitionend 事件。然后，表单可以在转换结束时调用 getPos。这比使用 jQuery promise 要好得多。

Newest jsfiddle :

var form = $('form');
console.log("The old left pos is:" + form.position().left);

function scaleUp() {
    var pageWidth = $('.container').width();
    var formWidth = form.width();
    var scaleX = pageWidth * 0.8 / formWidth;
    var scaleamount;

    if (pageWidth * 0.8 < 1200) {
        scaleamount = 1.2;
    } else if (pageWidth * 0.8 < 1900) {
        scaleamount = 1.8;
    } else {
        scaleamount = 2;
    }

    var scaleY = scaleX / scaleamount;

    form.attr('style', 'transform:scale(' + scaleX + ',' + scaleY + ');transition : transform 1.5s ease;');
}

form.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function(e) {
    if(e.originalEvent.propertyName.toLowerCase() === 'transform') {
        return getPos();
    }
});

function getPos() {
    var formTop = form.position().top;
    var formLeft = form.position().left;

    console.log("The new left pos is:" + form.position().left);
}

$('button').on('click', scaleUp);

旧答案

查看此jsfiddle 。它使用 jQuery promise :

var form = $('form');
console.log("The old left pos is:" + form.position().left);

function scaleUp() {
    var deferred = $.Deferred();
    var pageWidth = $('.container').width();
    var formWidth = form.width();
    var scaleX = pageWidth * 0.8 / formWidth;
    var scaleamount;

    if (pageWidth * 0.8 < 1200) {
        scaleamount = 1.2;
    } else if (pageWidth * 0.8 < 1900) {
        scaleamount = 1.8;
    } else {
        scaleamount = 2;
    }

    var scaleY = scaleX / scaleamount;

    form.attr('style', 'transform:scale(' + scaleX + ',' + scaleY + ');transition : transform 1.5s ease;');

    setTimeout(function() {
        deferred.resolve();
    }, 1600); // needs to wait for the animation to complete

    return deferred.promise()
}

function getPos() {
    var formTop = form.position().top;
    var formLeft = form.position().left;

    console.log("The new left pos is:" + form.position().left);
}

$('button').on('click', function () {

    $.when(scaleUp()).then(getPos);

});

动画是异步发生的，因此有一个 setTimeout 可以在动画完成发生后解决一个 promise 。一旦 Promise 解决，$.when 就会调用 getPos。这有点 hacky，但这是因为更改 style 属性并为其提供 CSS 动画的异步性质。

换句话说，由于动画是异步的，因此您需要等待它完成才能调用回调并获取新位置。 Promise 等待异步事件完成，然后调用回调。

如果您不熟悉 Promise，我建议您阅读 jQuery docs关于该主题，并在 Google 上搜索“javascript Promise”。这是一个完全不同的话题。

原始答案

您将函数的被调用版本作为回调传递(并且在 scaleUp 中您甚至从未使用过回调)，因此它不会将回调视为函数引用。

这样做:

function scaleUp(callback) {
    // all your code... then

    return callback(); // or just callback() without the return
}

$('.button').on('click', scaleUp.bind(null, getPos));

如果您传入 getPos()，您将传入 getPos 的返回值，而不是函数引用本身。顺便说一下，上面的点击处理程序是缩写的。您还可以这样做:

$('button').on('click', function() {
    scaleUp(getPos);
});