zoukankan      html  css  js  c++  java
  • [Functional Programming] Building a Timer UI by Composing Callbacks

    Controlling when a broadcaster starts and stops gives you complete control over your broadcasters. This let's you hook multiple pieces of UI together to offer to the user and allow them to manage the behaviors of your application. This lesson walks through creating a timer using a startWhen and a stopWhen operator which are hooked into buttons.

    Think of some other scenarios where have beginnings and ends controlled by events. For example, a mouse drag that starts with a mouse down and ends with a mouse up

    import { curry, pipe } from "ramda";
    
    document.getElementById("app").innerHTML = `
    <h1>Hello Parcel!</h1>
    <div>
      <button id="start">Start</button>
      <button id="stop">Stop</button>
    </div>
    `;
    
    const addListener = (selector, eventType) => (listener) => {
      const element = document.querySelector(selector);
      element.addEventListener(eventType, listener);
      return () => {
        element.removeEventListener(eventType, listener);
      };
    };
    const createInterval = curry((time, listener) => {
      let i = 0;
      const id = setInterval(() => {
        listener(i++);
      }, time);
      return () => {
        clearInterval(id);
      };
    });
    
    let startClick = addListener("#start", "click");
    let stopClick = addListener("#stop", "click");
    
    let timer = createInterval(100);
    
    // A event happen to trigger B event
    let startWhen = (whenBroadcaster) => (mainBroadcaster) => (listener) => {
      let cancelMain;
      let cancelWhen;
    
      cancelWhen = whenBroadcaster((whenValue) => {
        if (cancelMain) cancelMain();
        cancelMain = mainBroadcaster((value) => {
    if (value === done) {
          if (whenValue === done) {
        
            listener(done);
          }
         return
        }
        listener(value) }); });
    return () => { cancelMain(); cancelWhen(); }; }; let stopWhen = (whenBroadcaster) => (mainBroadcaster) => (listener) => { let cancelMain = mainBroadcaster(listener); let cancelWhen = whenBroadcaster((value) => { cancelMain(); }); return () => { cancelMain(); cancelWhen(); }; }; const operators = pipe(stopWhen(stopClick), startWhen(startClick)); operators(timer)(console.log); // startWhen(startClick)(stopWhen(stopClick)(timer)) (console.log)
  • 相关阅读:
    C#全角半角转换输出解决方法
    screen命令
    Parrot Linux国内源
    screen命令在freebsd安装和使用
    sysbench0.5 在 centos7下安装 (mysql-community-server)
    Mysql中文乱码问题完美解决方案
    PHP返回数据被nginx截断问题的解决方法
    yii2笔记:asset压缩js,css文件
    Yii2笔记:activerecord和activecontroller
    yii2笔记: 模块(module)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13915983.html
Copyright © 2011-2022 走看看