javascript - 想问一个js改变文本内容的时候在手机端比较卡顿的问题
问题描述
如图，我要实现点击数字按钮就在金额后面显示。
按键代码如下：
<div 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>
</div>
<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相对好一点，其他都很卡顿，这是什么原因呢？在微信端还是十分流畅的，好蛋疼啊。
我也和楼主遇到了同样的问题 搞了好久，终于解决了。
首先，楼主放弃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>
<div class="title"><img src="suc.png" /><span class="sp1">饭跑跑11</span></div>
<form id="form" method="post">
<div class="row">
<label>金额(￥)</label>
<input type="text" placeholder="请输入支付金额" name="money" id="money" value="0.00" disabled />
</div>
<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，为了解决这个问题真的搞了大半天。
这篇关于javascript - 想问一个js改变文本内容的时候在手机端比较卡顿的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
