javascript - js 中for循环中延时执行问题
本文介绍了javascript - js 中for循环中延时执行问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
想实现的是用条形图动态展示排序算法
其中排序算法中交换两个数的位置会触发交换两个div，现在想把这个交换操作给hold住1s
这个效果目前只能单步调试出现，想代码给他common.js文件：
/**
* Created by apple on 2017/3/30.
* 公共的js方法
*/
let commonFun = {
/**
* 生成length位 m~n 之间的随机数数组
*
* @param int m [description]
* @param int n [description]
* @param int length [description]
* @return array [description]
*/
randonm : ( m , n , length ) => {
let arr = [];
let a = m > n ? m : n;
let b = a == m ? n : m;
for (let i = 0; i < length ; i++){
arr[i] = Math.round(Math.random() * (a - b ) + b);
}
return arr;
},
/**
* 两个div互换位置
* @param div1id
* @param div2id
*/
swapDiv : ( div_1_id ,div_2_id ) => {
let div_1 = $('#'+div_1_id);
let div_2 = $('#'+div_2_id);
div_1.children().children().css({'border':'2px solid red'});
div_2.children().children().css({'border':'2px solid red'});
let t = document.getElementById(div_1_id).innerHTML;
document.getElementById(div_1_id).innerHTML=document.getElementById( div_2_id ).innerHTML;
document.getElementById(div_2_id).innerHTML=t;
div_1.children().children().css({'border':'none'});
div_2.children().children().css({'border':'none'});
},
};
/**
* 排序类
* @type {{}}
*/
let sorts = {
/**
* 冒泡排序
* @param data 要排序的数组
* @param bool true 升序，false 降序
* @param callback 回调函数
* @returns {*} array 排序后的数组
*/
bubbleSort : ( data , bool , callback ) => {
let length = data.length;
for ( let i = 0 ; i < length ; i++ ){
for ( let j = 0 ; j < length - i - 1 ; j++ ){
let flag = bool ? data[ j ] > data[ j + 1 ] : data[ j ] < data[ j + 1 ] ;
if ( flag ){
let temp = data[ j ];
data[ j ] = data [ j + 1 ] ;
data [ j + 1] = temp;
if( typeof callback === 'function' ){
callback( j , j + 1 , 'div' );
}
}
}
}
return data;
},
/**
* 选择排序
* @param data 要排序的数组
* @param bool bool true 升序，false 降序
* @param callback 回调函数
* @returns {*} array 排序后的数组
*/
selectionSort : ( data , bool , callback ) => {
let length = data.length;
for ( let i = 0 ; i < length ; i++ ){
for ( let j = i + 1 ; j < length ; j++ ){
let flag = bool ? data[ i ] > data[ j ] : data[ i ] < data[ j ] ;
if ( flag ){
let temp = data[ i ];
data [ i ] = data [ j ];
data [ j ] = temp;
if( typeof callback === 'function' ){
callback( i , j , 'div_' );
}
}
}
}
return data;
}
};
/**
* 供排序使用的回调函数
* @param i
* @param j
* @param name
*/
let sortCallback = (i , j , name) => {
let div_1 = name + '_' + i;
let div_2 = name + '_' + j;
commonFun[ 'swapDiv' ]( div_1 , div_2 );
};sort.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js" ></script>-->
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<script src="common.js"></script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="template" class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40
</div>
</div>
</body>
</html>
<style>
.progress{
margin-bottom: 10px;
}
.progress-bar{
float: none;
}
#template{
display: none;
}
</style>
<script>
$().ready( () => {
let template = document.getElementById('template').innerHTML;
/**
* 初始化条形图
* @param data
*/
let init_bar_chart = ( data ) => {
data.forEach( (element, index)=>{
let div = document.createElement('div');
div.innerHTML = '<div>' + template + '</div>';
div.id = 'div_' + index;
div.firstElementChild.className = 'progress';
div.firstElementChild.style = 'width:' + element*2 + '%;';
div.firstElementChild.firstElementChild.innerHTML = element;
document.body.appendChild(div);
});
};
let data = commonFun['randonm'](10,50,10); //生成10位随机数
init_bar_chart(data); //初始化条形图
sorts['bubbleSort'](data,true,sortCallback); //排序
} );
</script>现在想把swapDiv方法中互换div的操作
let t = document.getElementById(div_1_id).innerHTML;
document.getElementById(div_1_id).innerHTML=document.getElementById( div_2_id ).innerHTML;
document.getElementById(div_2_id).innerHTML=t;给延时一秒执行setTimeout似乎没生效。
解决方案
let count = 0;
let sortCallback = (i , j , name) => {
let div_1 = name + '_' + i;
let div_2 = name + '_' + j;
setTimeout(()=> {
commonFun[ 'swapDiv' ]( div_1 , div_2 );
}, ++count * 1000);
};这篇关于javascript - js 中for循环中延时执行问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
