Personal tools
You are here: Home Data Concurrency bug patterns Case2


Dynamic script loading is completed later than expected


In Case2, line 9~14 load a JavaScript file case2_s2.js dynamically. case2_s2.js defines a function button2Clicked which is used in onclick event handler of button2. If button2 is clicked before case2_s2.js is loaded, a concurrency bug occurs.



Coupling asynchronous scripts,

Source code


<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'case2_s2.js';
head = document.getElementsByTagName('head')[0];

function image1Loaded() {
document.getElementById("outputImage1").innerHTML = "Image1 is loaded";
<iframe id="iframe1" src="case2_i.html"></iframe><br />
<script src='case2_s1.js'></script>
<button id="button1" onclick="button1Clicked()" >Button1</button>
<div id="outputButton1"></div>
<script src='dummy.js'></script>
<button id="button2" onclick="button2Clicked()" >Button2</button>
<div id="outputButton2"></div>
<img src="image1.jpg" onload="image1Loaded()" height="80" witdth="80" />
<div id="outputImage1"></div>


<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Case2 iframe</title>
function image2Loaded() {
document.getElementById("outputImage2").innerHTML = "Image2 is loaded";
<div id="outputImage2"></div>
<img src="image2.jpg" height="100" witdth="100" onload="image2Loaded()" />


function button1Clicked() {
document.getElementById("outputButton1").innerHTML = "Button 1 is clicked";


function button2Clicked() {
document.getElementById("outputButton2").innerHTML = "Button 2 is clicked";


// dummy. works noting.
// dummy. works noting.
// dummy. works noting.

Execution Model

Operations and an Inital Test Case

There are 9 operations in this example.

  • p1: parsing operation, parse line 1~20 of case2.html
  • p2: parsing operation, parse case2_s1.js and line 21~23 of case2.html
  • p3: parsing operation, parse dummy.js and line 24~30 of case2.html
  • p4: parsing operation, parse case2_i.html
  • p5: parsing operation, parse case2_s2.js
  • n1: network operation, trigger onload event of image1.jpg
  • n2: network operation, trigger onload event of image2.jpg
  • u1: user event operation, trigger onclick event of button1
  • u2: user event operation, trigger onclick event of button2

The inital test case: p1 - p2 - p3 - p4 - n1 - n2 - u1 - u2

Happens-before Relations

  • For two parsing operations: (p1, p2), (p1, p4), (p2, p3), (p1, p5)
  • For two user event operations: (u1, u2)
  • For a parsing operation and a user event operation: (p2, u1), (p3, u2)
  • For a network operation: (p3, n1), (p4, n2)

Generated Possible Test Cases

840 test cases are generated and 196 test cases of them are buggy because they contains (u2, p5).

Document Actions