我在哪里

Question

我在哪里

我正在制作一张在线无声拍卖的表格。人们点击一个按钮，从六个固定金额$10, $25, $50, $100, $250, $500中选择一个，并将该金额添加到上一个出价中，为我们提供新出价的总金额。

问题

需要非常长的时间（点击按钮后4-5秒）才能使用.html将{tk-amount占位符替换为.current__amount和.new__amount并显示这两个部分使用对SheetsU API的AJAX调用从Google电子表格中获取的数据。

我感觉这是因为每次点击一个按钮时都会有多少东西在做。有没有更好的方法来解决这个问题？

scripts.js中

// Bid Options
    $(".button__form").on('click', function(){
        var btnSelected = $(this).hasClass("is-selected");
        var sectionOneCompleted = $(".check--one").hasClass("is-completed");

        if (btnSelected) {
            $(this).removeClass("is-selected");
            $(".check--one").css("color", "#ccc");
        } else {
            $(".button__form").removeClass("is-selected");
            $(this).addClass("is-selected");
            $(".check--one").css("color", "#ffdc00");
        }
    });

    $(".button__form").on("click", function() {
        var lastbtnClicked = ($(this).attr("class"));

        // Bid Options
        var buttonOne = $(this).hasClass("button__one");
        var buttonTwo = $(this).hasClass("button__two");
        var buttonThree = $(this).hasClass("button__three");
        var buttonFour = $(this).hasClass("button__four");
        var buttonFive = $(this).hasClass("button__six");
        var buttonSix = $(this).hasClass("button__six");

        // Bid Values
        var buttonOneValue = 10;
        var buttonTwoValue = 25;
        var buttonThreeValue = 50;
        var buttonFourValue = 100;
        var buttonFiveValue = 250;
        var buttonSixValue = 500;

        /*-------------------------------------
        API: SHEETSU
        --------------------------------------*/

        $.ajax({
            url: "https://sheetsu.com/apis/4a8eceba",
            method: "GET",
            dataType: "json"
        }).then(function(spreadsheet) {

            // Get and print data
            var currentBid = parseInt(spreadsheet.result.pop().Bids);
            console.log(currentBid);

            var phoneNumber = "1" + spreadsheet.result.pop()["Phone Number"];
            var printBid = $(".current__amount").html("$" + currentBid);
            console.log(printBid);

            if (buttonOne) {
                $(".new__amount").html("$" + (currentBid + buttonOneValue));
            } else if (buttonTwo) {
                $(".new__amount").html("$" + (currentBid + buttonTwoValue));
            } else if (buttonThree) {
                $(".new__amount").html("$" + (currentBid + buttonThreeValue));
            } else if (buttonFour) {
                $(".new__amount").html("$" + (currentBid + buttonFourValue));
            } else if (buttonFive) {
                $(".new__amount").html("$" + (currentBid + buttonFiveValue));
            } else if (buttonSix) {
                $(".new__amount").html("$" + (currentBid + buttonSixValue));
            }
        });
    });

Answer 1

您确定您的“性能问题”实际上并非由您的http请求完成后需要4-5秒吗？要检查打开浏览器控制台并单击网络选项卡。然后按下按钮。您应该看到发出请求以及完成所需的时间。

Answer 2

让我们逐一进行

将这些退出回调，无需为每次点击重新初始化。

// Bid Values
var buttonOneValue = 10;
var buttonTwoValue = 25;
var buttonThreeValue = 50;
var buttonFourValue = 100;
var buttonFiveValue = 250;
var buttonSixValue = 500;

减少

 $(".button__form").on('click', function(){
        var btnSelected = $(this).hasClass("is-selected");
        var sectionOneCompleted = $(".check--one").hasClass("is-completed");

        if (btnSelected) {
            $(this).removeClass("is-selected");
            $(".check--one").css("color", "#ccc");
        } else {
            $(".button__form").removeClass("is-selected");
            $(this).addClass("is-selected");
            $(".check--one").css("color", "#ffdc00");
        }
    });

到这个

 $(".button__form").on('click', function(){
        $(this).toggleClass("is-selected");
        $(".check--one").toggleClass("is-completed");
    });
//And adjust the color of .check--one in css

并有效地使用class属性

    if (buttonOne) {
        $(".new__amount").html("$" + (currentBid + buttonOneValue));
    } else if (buttonTwo) {
        $(".new__amount").html("$" + (currentBid + buttonTwoValue));
    } else if (buttonThree) {
        $(".new__amount").html("$" + (currentBid + buttonThreeValue));
    } else if (buttonFour) {
        $(".new__amount").html("$" + (currentBid + buttonFourValue));
    } else if (buttonFive) {
        $(".new__amount").html("$" + (currentBid + buttonFiveValue));
    } else if (buttonSix) {
        $(".new__amount").html("$" + (currentBid + buttonSixValue));
    }

在for循环中使用

这样的东西

$(".new__amount."+buttons[i].class).html("$" + (currentBid + buttons[i].value));

var buttons = [{class:"buttonSix", value:123},....]

所以最后你的代码看起来像这样。

// Bid Options
var buttons = [{class:"buttonOne", value:12},....{class:"buttonSix", value:123}]
$(".button__form").on('click', function(){
    $(this).toggleClass("is-selected");
        $(".check--one").toggleClass("is-completed");
       //And adjust the color of .check--one in css

    var lastbtnClicked = ($(this).attr("class"));

    /*-------------------------------------
    API: SHEETSU
    --------------------------------------*/

    $.ajax({
        url: "https://sheetsu.com/apis/4a8eceba",
        method: "GET",
        dataType: "json"
    }).then(function(spreadsheet) {

        // Get and print data
        var currentBid = parseInt(spreadsheet.result.pop().Bids);
        console.log(currentBid);

        var phoneNumber = "1" + spreadsheet.result.pop()["Phone Number"];
        var printBid = $(".current__amount").html("$" + currentBid);
        console.log(printBid);
        var $btnForm = $(".button__form")
        for(){
            if($btnForm.hasClass(buttons[i].class)){
               $(".new__amount.").html("$" + (currentBid + buttons[i].value));
            }
        }
    });
});

使用AJAX调用获取数据，单击处理程序导致显示信息的问题

我在哪里

问题

scripts.js中

2 个答案: