コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
javascript - 想问一个js改变文本内容的时候在手机端比较卡顿的问题
PHPz
PHPz 2017-04-11 11:59:56
0
2
327

如图，我要实现点击数字按钮就在金额后面显示。

按键代码如下：

<p class="input-number">
            <table class="number">
                <tr>
                    <td class="" data-value="1">1</td>
                    <td data-value="2">2</td>
                    <td data-value="3">3</td>
                    <td data-value="del"><img  width="30" src="__IMG__/del.png"></td>
                </tr>
                <tr>
                    <td data-value="4">4</td>
                    <td data-value="5">5</td>
                    <td data-value="6">6</td>
                    <td class="pay" rowspan="3" data-value="pay">确认<br>支付</td>
                </tr>
                <tr>
                    <td data-value="7">7</td>
                    <td data-value="8">8</td>
                    <td data-value="9">9</td>
                </tr>
                <tr>
                    <td colspan="2" data-value="0">0</td>
                    <td data-value=".">.</td>
                </tr>
            </table>
        </p>
<script>
$("td:not([data-value=pay])").on('click',function(){
        var money = $("#money").text(),newMoney;
        var val = $(this).data('value');

        if(val == 'del'){
            newMoney = money.substring(0,money.length-1);
        }else{
            if(money.length > 5){
            return false;
        }
            newMoney = money + val;
        }
        $('#money').text(newMoney);
</script>

用click发现在iphone端非常卡顿，于是我就选择在touchstart事件触发的时候执行。

    $("td:not([data-value=pay])").on('touchstart',function(){
        var money = $("#money").text(),newMoney;
        var val = $(this).data('value');

        if(val == 'del'){
            newMoney = money.substring(0,money.length-1);
        }else{
            if(money.length > 5){
            return false;
        }
            newMoney = money + val;
        }
        $('#money').text(newMoney);
    })

基本上卡顿的效果不明显了，但是在支付宝钱包客户端里面显示依旧是十分卡顿，不灵敏，体验感超差，主要是iphone客户端，我测试的是iphone6 ，6s，还有6plus，6s相对好一点，其他都很卡顿，这是什么原因呢？在微信端还是十分流畅的，好蛋疼啊。

PHPz
PHPz

学习是最好的投资！

全員に返信(2)
黄舟
黄舟2017-04-11 12:01:56 2棟

我也和楼主遇到了同样的问题 搞了好久，终于解决了。
首先，楼主放弃click而用touchstart是正确的。然后我也遇到了在支付宝界面卡顿的情况，发现只要在touchstart事件后加个e.preventDefault();这个阻止就好。就不卡顿了。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="telephone=no" name="format-detection" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>收款</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <p class="title"><img src="suc.png" /><span class="sp1">饭跑跑11</span></p>
    <form id="form" method="post">
        <p class="row">
            <label>金额(￥)</label>
            <input type="text" placeholder="请输入支付金额" name="money" id="money" value="0.00" disabled />
        </p>
        
        
        
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td class="keyboard_key">1</td>
                <td class="keyboard_key">2</td>
                <td class="keyboard_key">3</td>
                <td class="del"><img src="del.png" alt="删除"/></td>
            </tr>
            <tr>
                <td class="keyboard_key">4</td>
                <td class="keyboard_key">5</td>
                <td class="keyboard_key">6</td>
                <td rowspan="3" class="sure" id="clickme"><img src="s.png" /><span>微信支付</span></td>
            </tr>
            <tr>
                <td class="keyboard_key">7</td>
                <td class="keyboard_key">8</td>
                <td class="keyboard_key">9</td>
            </tr>
            <tr>
                <td class="keyset"><img src="key.png" alt="键盘" /></td>
                <td class="keyboard_key">0</td>
                <td class="keyboard_key">.</td>
            </tr>
        </table>
    </form>
</body>

</html>
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script>

$(function(){    
    //键盘显示和隐藏(刷新加载时从底部滑出)
    $("table").slideDown();

    //点击金额input框时，键盘显示
    $("form").on("touchstart",function(){
        $("table").slideDown();
    })
    
    var left=[];//"整数部分数组"；
    var right=[];//"小数部分数组"；
    var dian=false;//"判断操作的是小数位还是整数位"
    //输入金额
    $(".keyboard_key").on("touchstart",function(e){
        e.preventDefault();
        if($(this).text()=="."){
            dian=true;
            e.preventDefault();
            return;
        }
        if(dian){
            if(right.length<2){
                if(right.length==1&&$(this).text()=="0"){
                    return;
                }
                right.push($(this).text())
                if($(this).text()!="0"&&!$(".sure").hasClass("green")){
                        $(".sure").addClass("green")
                    }
            }
        }else{//操作整数位
            if( left.length<8 ){
                left.push($(this).text());
                if(leftfuc(left)[0]==0){
                    left.shift(leftfuc(left)[0])
                }
            }
            if($(this).text()!="0"&&!$(".sure").hasClass("green")){
                $(".sure").addClass("green")
            }    
        }
        //整理数组的数据
        $("#money").val(leftfuc(left)+"."+rightfuc(right));
    })
    
    $(".del").on("touchstart",function(e){
        e.preventDefault();
        if($(".sure").hasClass("green")){    
            if(dian){
                for(var i=right.length-1;i>=0;i--){
                    if(right[i]!="0"){
                        right.pop();
                        $("#money").val(leftfuc(left)+"."+rightfuc(right));
                        if(i==0 && left.length==0 || right.length==1 && right[0]=="0" && left.length==0){
                            $(".sure").removeClass("green");
                            dian=false;
                        }
                        return;
                    }else{
                        right.pop();
                    }
                }
                dian=false;
                for(var j=left.length-1;j>=0;j--){
                    if(left[j]!="0" || j>0){
                        left.pop();
                        $("#money").val(leftfuc(left)+"."+rightfuc(right));
                        if(j==0){
                            $(".sure").removeClass("green")
                        }
                        return;
                    }
                }
            }else{
                left.pop();
                $("#money").val(leftfuc(left)+"."+rightfuc(right));
                if(left.length==0){
                    $(".sure").removeClass("green");
                }
            }
        }
    })
    
    //整数部分数组处理
    function leftfuc(arr){
          if(arr.length!=0){
            return arr.toString().replace(/,/g,'');
          }
          else{
              return 0
          }
    }
    //小数部分数据处理
    function rightfuc(arr){
        return (arr.toString().replace(/,/g,'')+"00").slice(0,2);
    }
    
   //按下键盘隐藏键时，键盘隐藏
    $(".keyset").on("touchstart",function(e){
        e.preventDefault();
        if(leftfuc(left)==0){
            $(".sure").removeClass("green");
            $("#money").val(0+"."+rightfuc(right))
        }
        $("table").slideUp();
        e.stopPropagation();            
    })
    
    //微信支付宝判断
    var a=1;
    if(a==1){
        $(".sure img").attr("src","zfb.png");
        $(".sure span").text("支付宝付款");
        $(".keyboard_key").on("touchstart",function(){
            if($("table").find("td").hasClass("green")){
                $(".green").css("background","#009FE8");
            }
        })
        $(".del").on("touchstart",function(){
            if( $("#money").val()=="0.00"){
                $(".sure").css("background","#BCBCBC");
            }
        })
    }
})

</script>

  • {margin: 0;padding: 0;font-family: "microsoft yahei"; -webkit-touch-callout: none; -webkit-user-select: none;}
    input{ -webkit-user-select: auto;}

ul li{ list-style: none;}
body{ background: #EFEFEF;}

.title{ width: 100%; font-size: 20px; color: #333; height: 40px; line-height: 40px; text-align: center; padding:25px 0;}
.title img{ width: 40px; height: 40px; border-radius:40px; display: inline-block;}
.title .sp1{ display: inline-block; height: 50px; line-height:52px; position: relative; top:-10px; left:5px;}
.row{ display:block; width: 90%; height: 50px; line-height: 52px; background: #fff; border: 1px solid #A6A5AA; border-radius:5px; margin:0 auto; padding: 0 1%}
form{ overflow: hidden;}
form label{ width: 21%; font-size: 16px; float: left; color: #646368;}
form #money{ width: 75%; float: right; height: 50px; border: none; line-height: 52px; text-align: right; font-size: 18px; outline: none;}

money:disabled{ background:#fff; color: #000;}

table{ background: #fff; position: absolute; bottom: 0px; border-top: 1px solid #E2E2E2; border-left: 1px solid #E2E2E2; border-right: 1px solid #E2E2E2; box-sizing:border-box}
td{ width:25%; border-bottom: 1px solid #E2E2E2; height: 55px; border-collapse:collapse; border-right: 1px solid #E2E2E2; box-sizing:border-box; text-align: center; line-height: 55px; background: #fff;}
.sure{ height: 168px; background: #BCBCBC;}
.del img{ position: relative; top:5px}
.keyset img{ position: relative; top:7px}

clickme span{ display: block; color: #fff; height: 25px; line-height: 25px;}

clickme img{ position: relative; top:3px}

td:active{ background: #ccc; color: #fff;}
.green{ background:#08BC05;}

附上我的代码和css，为了解决这个问题真的搞了大半天。

いいねを押す +0
返信を追加
左手右手慢动作
左手右手慢动作2017-04-11 12:01:56 1棟

  1. 按照你页面的复杂度，代码量应该不多，或者是其他代码引起的

  2. 没有必要给每个td都绑定touch事件，使用事件代理给input-number绑一个就好了

  3. 把变量缓存起来，比如$(#money)节点

いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート