Window object

Catalog

1、window object

2、window Common methods for objects

2.1、alert()

2.2、confirm()

3、window Object

3.1、 Page loading

3.2、 Resize window

4、 Timer method

4.1、setTimeout()

4.2、setInterval()

---

1、window object

window Object is the top-level object of the browser , It has a dual role .

（1） It is JavaScript An interface object that accesses the browser window .

（2） It's a global object , All variables defined in the global scope 、 Functions are their properties or methods .

Because all global properties and methods belong to window object , Therefore, it is possible to omit window. Such as calling

alert() When the method is used , It can be written. window.alert(), But it is usually called directly alert() The method can .

Example ： All global properties and methods belong to window object

        function myFunction1() {
            console.log('hello');
        }
        window.myFunction1();
        console.log(window);

2、window Object's Common methods

2.1、alert()

Used to pop up a warning box in the page , Generally used for program debugging .

Use the syntax ：window.alert( Prompt information );

Example ：

        alert('start');
        window.alert('end')

2.2、confirm()

Message confirmation prompt box , It is generally used to confirm deletion , Prevent accidental deletion of . This method can give prompt information , After execution

Will return a Boolean value .

Use the syntax ：var Return value = confirm( Prompt information );

Example ：

        var f = confirm(' Are you sure you want to delete ？');
        console.log(f);
        if (confirm(' Are you sure you want to delete ？ Cannot recover after deletion ！')) {
            console.log(' Successfully deleted ！')
        }

explain ：confirm() After method execution , Will return a Boolean value , According to this value, we can make corresponding

operation .

3、window Object's Common events

3.1、 Page loading

 window.onload Is a page load event , When the document content （ Include images 、 Script files 、CSS Style files, etc ） This event will be triggered after the complete loading —— That is, call the handler .window.onload Is the traditional event registration method , It will only be called once , If more than one event is written in the page , Only the last load event will be executed .

        window.onload = function() {
            console.log(' Page loading complete ！')
        };

3.2、 Resize window

When resizing the page window , Will trigger onresize event , The syntax of this event is as follows .

window.onresize = function(){ }

Be careful ：

（1） This event is triggered whenever the window size changes in pixels .

（2） When using this event to implement a responsive layout, you can use window.innerWidth Property to get the current screen width

degree .

The demo case ：

        window.onresize = function() {
            console.log(' The current window width is ：' + window.innerWidth);
            console.log(' The current window height is ：' + window.innerHeight);
        };

4、 Timer method

4.1、setTimeout()

setTimeout() A timer is a delay for a specified time （ Number of milliseconds ） Will execute the callback function , Only once .

The grammar is as follows ：window.setTimeout( Callback function , [ Delay execution in milliseconds ])

The following precautions should be paid attention to when using this timer ：

（1）window Objects can be omitted ;

（2） The callback function can be written directly in the timer method, or it can only write the function name ;

（3） The unit of delay in execution time is milliseconds , The default is 0 Indicates that the callback function is executed immediately ;

（4） The timer is usually given a name .

Examples of use ：

        console.log(' Hello ');
        setTimeout(function() {
            console.log('hello')
        }, 2000);
        console.log(' Good morning everyone ！');
        console.log('-----------');

        function fn() {
            console.log(' The output of the callback function ');
        }
        setTimeout(fn, 2000);

demand ： Hope that after clicking the button , End the timer .

  <button onclick="btnOnClick()"> Click on </button>
 //  Click the button to end the timer  
        var timer = null; //  Handle object , Used to get timer object  
        function btnOnClick() {
            //  Delete timer object  
            clearTimeout(timer);
        }
        var index = 0;

        function fn() {
            console.log(index++);
            timer = setTimeout(fn, 2000);
        }
        timer = setTimeout(fn, 2000);

explain ：

（1） We can define the timer object , Give it a reference name , By this reference name , We

You can end the timer according to your own business logic .

（2） To end the timer, you need to use window Object clearTimeout() Method , The argument to this method is

Timer reference object .

4.2、setInterval()

setInterval() A timer is a delay for a specified time （ Number of milliseconds ） Will execute the callback function .

The grammar is as follows ：window.setInterval( Callback function , [ Interval execution time in milliseconds ])

Example ：

     setInterval(function() {
            console.log('hello');
        }, 2000);

The following precautions should be paid attention to when using this timer ：

（1）window Objects can be omitted ;

（2） The callback function can be written directly in the timer method, or it can only write the function name ;

（3） The unit of interval execution time is milliseconds , The default is 0 Indicates that the callback function is executed immediately ;

（4） The timer is usually given a name ;

（5） The first execution is also executed after a specified delay of milliseconds , Then it is executed every specified number of milliseconds .

setTimeout and setInterval The difference between ：

（1）setTimeout Is executed once after a specified number of milliseconds , and setInterval Is to execute repeatedly after delaying the specified number of milliseconds .

（2） If you want to setTimeout Realization setInterval , So you need to setTimeout Call yourself again in the callback function of Sure .

You can give setInterval Define a name , At the same time, this name can be used to end the execution of scheduled tasks .

        //  demand ： When  index  The value of  5  when , ends .
        var timer = null;
        var index = 1;
        timer = setInterval(function() {
            if (index === 5) clearInterval(timer);
            console.log(index++);
        }, 1000);