JS多异步操作的并行与串行(异步循环)

JavaScript019

JS多异步操作的并行与串行(异步循环),第1张

日常开放过程中经常遇到如下场景:

遇到这样的场景是不是迷茫,怎么去控制串行与并行喃!!!

我有一个数组,需要依次处理一个数组,处理的过程是一个异步操作。

我有三个文件,把目录路径放在数组,去异步读取所有文件,在读取完毕后再进行其他操作。

用JS实现

点击‘提交’

按钮变成

‘继续添加’同时文本框变灰且只可读,

再次点击

‘继续添加’

文本框变回原来可写,按钮变成‘提交’。一直可以循环执行:

var

bbb

=

document.getElementById('btn1')

bbb.onclick

=

function()

{

var

ttt

=

document.getElementById('btn1').value

if

(ttt

==

'提交')

{

isreadonly()

changebutton1()

}

else

if

(ttt

==

'继续添加')

{

readwrite()

changebutton2()

}

}

function

isreadonly()

{

var

obj

=

document.getElementById("in1")

obj.setAttribute("readOnly",

true)

obj.style.backgroundColor

=

"#d2d2d2"

var

obj

=

document.getElementById("in2")

obj.setAttribute("readOnly",

true)

obj.style.backgroundColor

=

"#d2d2d2"

var

obj

=

document.getElementById("in3")

obj.setAttribute("readOnly",

true)

obj.style.backgroundColor

=

"#d2d2d2"

}

function

readwrite()

{

var

obj

=

document.getElementById("in1")

obj.setAttribute("readOnly",

false)

obj.style.backgroundColor

=

"#ffffff"

var

obj

=

document.getElementById("in2")

obj.setAttribute("readOnly",

false)

obj.style.backgroundColor

=

"#ffffff"

var

obj

=

document.getElementById("in3")

obj.setAttribute("readOnly",

false)

obj.style.backgroundColor

=

"#ffffff"

}

function

changebutton1()

{

document.getElementById('btn1').value

=

'继续添加'

}

function

changebutton2()

{

document.getElementById('btn1').value

=

'提交'

}

应用:可将上诉代码中的文字替换,实现其它类型的循环执行。

1、break;

 for(var i=1i<=5i++){

            if(i>2){

           break( 跳出循环 循环结束 下面的语句不执行了) }

            document.write(i)}

         在while循环中 使用break 

         打印出我是软件大道的程序员 5次 但是 第4次的时候就不打印了 

         let i=1

         while(i<=5){

          if(i==4){ break  }

            document.write('<br>我是软件大道的程序员'+i)

             i++}

        break语句用于终止某个循环,使程序跳到循环块外的下一条语句,

        在循环中位于break后的语句将不再执行,

        break 语句不仅可以用在for循环中,也可以用在其他循环中 ,

2、  continue;

for(var i=1i<=5i++){

        if(i==3){continue结束本次循环,进入下次循环 

            continue( 跳过 不会终止循环,但是会跳过本次循环) }

            if(i==3) continue

          document.write(i)}

        for(var i=1i<=5i++){

            let chenji = parseInt(prompt('第'+i+'位同学请输入成绩'))

             初级调试 使用console.log或者alert 

            console.log(chenji)

            alert(chenji) 

            if(chenji<0){

                 document.write('<br>第'+i+'位同学成绩有误')

                continue

                document.write('<br>终止程序')

                break }

else{document.write('<br>第'+i+'位同学请输入成绩:'+chenji)}

}

3、双重循环