想实现的是用条形图动态展示排序算法
其中排序算法中交换两个数的位置会触发交换两个p,现在想把这个交换操作给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;
},
/**
* 两个p互换位置
* @param p1id
* @param p2id
*/
swapp : ( p_1_id ,p_2_id ) => {
let p_1 = $('#'+p_1_id);
let p_2 = $('#'+p_2_id);
p_1.children().children().css({'border':'2px solid red'});
p_2.children().children().css({'border':'2px solid red'});
let t = document.getElementById(p_1_id).innerHTML;
document.getElementById(p_1_id).innerHTML=document.getElementById( p_2_id ).innerHTML;
document.getElementById(p_2_id).innerHTML=t;
p_1.children().children().css({'border':'none'});
p_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 , 'p' );
}
}
}
}
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 , 'p_' );
}
}
}
}
return data;
}
};
/**
* 供排序使用的回调函数
* @param i
* @param j
* @param name
*/
let sortCallback = (i , j , name) => {
let p_1 = name + '_' + i;
let p_2 = name + '_' + j;
commonFun[ 'swapp' ]( p_1 , p_2 );
};
sort.html文件
Title
现在想把swapp方法中互换p的操作
let t = document.getElementById(p_1_id).innerHTML;
document.getElementById(p_1_id).innerHTML=document.getElementById( p_2_id ).innerHTML;
document.getElementById(p_2_id).innerHTML=t;
给延时一秒执行setTimeout似乎没生效。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
setTimeout是个异步过程,如果想通过setTimeout来实现延时,需要写一大堆回调,而且for循环也需要改成回调的方式(或者 generator,逻辑会更复杂)。我比较懒,所以直接用了 es2017 的 async/await 语法来改写。不过支持这个语法的浏览器还不多,所以又使用 TypeScript 来转译了一下这个代码
改写的代码如下(只贴了几个部分代码):
转义后的代码在 jsfiddle 上看得到——效果是有了,但是距你给的那个动画,还是有差距
https://jsfiddle.net/48dktxnq/